From c31f909ef94fce17dff3900955dd679659b1590e Mon Sep 17 00:00:00 2001
From: MisbehavedNinjaRadiator
 <120029998+MisbehavedNinjaRadiator@users.noreply.github.com.>
Date: Wed, 18 Jun 2025 16:13:27 +0200
Subject: [PATCH] basic post done

---
 code/frontend/src/Post.tsx      |  82 ++++++++++++++++++++++++
 code/frontend/src/feed/Feed.tsx |   2 +
 code/frontend/src/post.css      | 107 ++++++++++++++++++++++++++++++++
 3 files changed, 191 insertions(+)
 create mode 100644 code/frontend/src/Post.tsx
 create mode 100644 code/frontend/src/post.css

diff --git a/code/frontend/src/Post.tsx b/code/frontend/src/Post.tsx
new file mode 100644
index 0000000..fc0a072
--- /dev/null
+++ b/code/frontend/src/Post.tsx
@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import './post.css';
+
+export default function Post() {
+  const [expanded, setExpanded] = useState(false);
+
+  const handleExpandClick = () => {
+    setExpanded(!expanded);
+  };
+
+  return (
+    <div className="post-card">
+      <div className="post-header">
+        <div className="avatar">R</div>
+        <div className="post-header-text">
+          <h3>Shrimp and Chorizo Paella</h3>
+          <p className="subheader">September 14, 2016</p>
+        </div>
+        <button className="icon-button more-button" aria-label="settings">
+          ⋮
+        </button>
+      </div>
+      <img
+        className="post-image"
+        src="/static/images/cards/paella.jpg"
+        alt="Paella dish"
+      />
+      <div className="post-content">
+        <p>
+          This impressive paella is a perfect party dish and a fun meal to cook
+          together with your guests. Add 1 cup of frozen peas along with the mussels,
+          if you like.
+        </p>
+      </div>
+      <div className="post-actions">
+        <button className="icon-button" aria-label="add to favorites">
+          <i className="fa fa-heart"></i>
+        </button>
+        <button className="icon-button" aria-label="share">
+          <i className="fa fa-share"></i>
+        </button>
+        <button
+          className={`icon-button expand-button ${expanded ? 'expanded' : ''}`}
+          onClick={handleExpandClick}
+          aria-expanded={expanded}
+          aria-label="show more"
+        >
+          <i className="fa fa-chevron-down"></i>
+        </button>
+      </div>
+      {expanded && (
+        <div className="post-collapse">
+          <h4>Method:</h4>
+          <p>
+            Heat 1/2 cup of the broth in a pot until simmering, add saffron and set
+            aside for 10 minutes.
+          </p>
+          <p>
+            Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over
+            medium-high heat. Add chicken, shrimp and chorizo, and cook, stirring
+            occasionally until lightly browned, 6 to 8 minutes. Transfer shrimp to a
+            large plate and set aside, leaving chicken and chorizo in the pan. Add
+            pimentón, bay leaves, garlic, tomatoes, onion, salt and pepper, and cook,
+            stirring often until thickened and fragrant, about 10 minutes. Add
+            saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil.
+          </p>
+          <p>
+            Add rice and stir very gently to distribute. Top with artichokes and
+            peppers, and cook without stirring, until most of the liquid is absorbed,
+            15 to 18 minutes. Reduce heat to medium-low, add reserved shrimp and
+            mussels, tucking them down into the rice, and cook again without
+            stirring, until mussels have opened and rice is just tender, 5 to 7
+            minutes more. (Discard any mussels that don't open.)
+          </p>
+          <p>
+            Set aside off of the heat to let rest for 10 minutes, and then serve.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/code/frontend/src/feed/Feed.tsx b/code/frontend/src/feed/Feed.tsx
index 2299266..fcbf485 100644
--- a/code/frontend/src/feed/Feed.tsx
+++ b/code/frontend/src/feed/Feed.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from "react";
 import TestPost from "../TestPost";
 import "./feed.css";
+import Post from "../Post";
 
 function Feed() {
   const [posts, setPosts] = useState<number[]>([]);
@@ -48,6 +49,7 @@ function Feed() {
 
   return (
     <div className="feedContainer">
+        <Post/>
       <main className="feedContent" ref={feedRef}>
         {posts.map((postId, idx) => (
           <TestPost key={idx} postId={postId} />
diff --git a/code/frontend/src/post.css b/code/frontend/src/post.css
new file mode 100644
index 0000000..684b7dd
--- /dev/null
+++ b/code/frontend/src/post.css
@@ -0,0 +1,107 @@
+.post-card {
+  max-width: 345px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  overflow: hidden;
+  font-family: sans-serif;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  background-color: #fff;
+}
+
+.post-header {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  position: relative;
+}
+
+.avatar {
+  background-color: #f44336;
+  color: #fff;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: bold;
+  margin-right: 12px;
+}
+
+.post-header-text h3 {
+  margin: 0;
+  font-size: 1.1rem;
+}
+
+.subheader {
+  color: #888;
+  font-size: 0.85rem;
+}
+
+.more-button {
+  position: absolute;
+  right: 16px;
+  top: 16px;
+  font-size: 1.2rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.post-image {
+  width: 100%;
+  height: auto;
+  max-height: 194px;
+  object-fit: cover;
+}
+
+.post-content {
+  padding: 16px;
+  color: #444;
+  font-size: 0.95rem;
+}
+
+.post-actions {
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  border-top: 1px solid #eee;
+}
+
+.icon-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 1.1rem;
+  margin-right: 10px;
+  color: #555;
+  transition: transform 0.2s;
+}
+
+.icon-button:hover {
+  color: #000;
+}
+
+.expand-button {
+  margin-left: auto;
+  transition: transform 0.3s ease;
+}
+
+.expand-button.expanded {
+  transform: rotate(180deg);
+}
+
+.post-collapse {
+  padding: 0 16px 16px;
+  border-top: 1px solid #eee;
+}
+
+.post-collapse h4 {
+  margin: 16px 0 8px;
+}
+
+.post-collapse p {
+  margin: 0 0 12px;
+  font-size: 0.95rem;
+  color: #444;
+}