Very basic feed of basic layout posts

code/frontend/src/components/Post.tsx

@@ -18,7 +18,9 @@ import MoreVertIcon from '@mui/icons-material/MoreVert';
 interface ExpandMoreProps extends IconButtonProps {
   expand: boolean;
 }
-
+interface PostProps {
+  postId: number;
+}
 const ExpandMore = styled((props: ExpandMoreProps) => {
   const { expand, ...other } = props;
   return <IconButton {...other} />;
@@ -43,19 +45,26 @@ const ExpandMore = styled((props: ExpandMoreProps) => {
   ],
 }));
 
-export default function Post() {
+export default function Post({postId}: PostProps) {
   const [expanded, setExpanded] = React.useState(false);
+  const content = "Fetch content here";
+  const expandedContent = "Fetch expanded here"
+  const title = "Fetch heading here";
+  const createdAt = "Fetch created at here";
+  const user = "Fetch user here";
+  const media = "Fetch media here (path)";
 
   const handleExpandClick = () => {
     setExpanded(!expanded);
   };
 
+
   return (
     <Card sx={{ maxWidth: 345 }}>
       <CardHeader
         avatar={
-          <Avatar sx={{ bgcolor: red[500] }} aria-label="recipe">
-            R
+          <Avatar sx={{ bgcolor: red[500] }} aria-label="recipe">     
+            {user ? user.charAt(0).toUpperCase() : 'U'}   //Todo: when fetching change to user.name or sth
           </Avatar>
         }
         action={
@@ -63,20 +72,17 @@ export default function Post() {
             <MoreVertIcon />
           </IconButton>
         }
-        title="Shrimp and Chorizo Paella"
-        subheader="September 14, 2016"
+        title={title}
+        subheader= {createdAt}
       />
       <CardMedia
         component="img"
         height="194"
-        image="/static/images/cards/paella.jpg"
-        alt="Paella dish"
+        image= {media}
       />
       <CardContent>
         <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-          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.
+          {content}
         </Typography>
       </CardContent>
       <CardActions disableSpacing>
@@ -97,31 +103,7 @@ export default function Post() {
       </CardActions>
       <Collapse in={expanded} timeout="auto" unmountOnExit>
         <CardContent>
-          <Typography sx={{ marginBottom: 2 }}>Method:</Typography>
-          <Typography sx={{ marginBottom: 2 }}>
-            Heat 1/2 cup of the broth in a pot until simmering, add saffron and set
-            aside for 10 minutes.
-          </Typography>
-          <Typography sx={{ marginBottom: 2 }}>
-            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.
-          </Typography>
-          <Typography sx={{ marginBottom: 2 }}>
-            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&apos;t open.)
-          </Typography>
-          <Typography>
-            Set aside off of the heat to let rest for 10 minutes, and then serve.
-          </Typography>
+          <Typography sx={{ marginBottom: 2 }}>{expandedContent}</Typography>
         </CardContent>
       </Collapse>
     </Card>