mostly styling

frontend/src/components/ArticleCard.tsx

@@ -1,6 +1,6 @@
 import { useNavigate } from 'react-router-dom';
 import type { Article } from '../types/Article.ts';
-import { Card } from '@mui/material';
+import { Card, Typography } from '@mui/material';
 
 interface Props {
   article: Article;
@@ -8,13 +8,20 @@ interface Props {
 
 export default function ArticleCard(props: Props) {
   const navigate = useNavigate();
+  // TODO: Retrieve author id => author name
 
   return (
     <Card
-      className="p-1 cursor-pointer"
+      className="flex flex-col p-5 gap-2 cursor-pointer"
       onClick={() => { navigate(`/article/${props.article.slug}`) }}
     >
-      {props.article.name}
+      <div className="flex align-center justify-center">
+        <Typography variant="h5">
+          {props.article.name}
+        </Typography>
+      </div>
+      <div className="flex align-center justify-center">By {props.article.author_id}</div>
+      <div className="flex align-center justify-center">{props.article.summary}</div>
     </Card>
   );
 };