mostly styling

frontend/src/assets/provile.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+␍<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_15_82)">
+<rect width="24" height="24" fill="white"/>
+<g filter="url(#filter0_d_15_82)">
+<path d="M14.3365 12.3466L14.0765 11.9195C13.9082 12.022 13.8158 12.2137 13.8405 12.4092C13.8651 12.6046 14.0022 12.7674 14.1907 12.8249L14.3365 12.3466ZM9.6634 12.3466L9.80923 12.8249C9.99769 12.7674 10.1348 12.6046 10.1595 12.4092C10.1841 12.2137 10.0917 12.022 9.92339 11.9195L9.6634 12.3466ZM4.06161 19.002L3.56544 18.9402L4.06161 19.002ZM19.9383 19.002L20.4345 18.9402L19.9383 19.002ZM16 8.5C16 9.94799 15.2309 11.2168 14.0765 11.9195L14.5965 12.7737C16.0365 11.8971 17 10.3113 17 8.5H16ZM12 4.5C14.2091 4.5 16 6.29086 16 8.5H17C17 5.73858 14.7614 3.5 12 3.5V4.5ZM7.99996 8.5C7.99996 6.29086 9.79082 4.5 12 4.5V3.5C9.23854 3.5 6.99996 5.73858 6.99996 8.5H7.99996ZM9.92339 11.9195C8.76904 11.2168 7.99996 9.948 7.99996 8.5H6.99996C6.99996 10.3113 7.96342 11.8971 9.40342 12.7737L9.92339 11.9195ZM9.51758 11.8683C6.36083 12.8309 3.98356 15.5804 3.56544 18.9402L4.55778 19.0637C4.92638 16.1018 7.02381 13.6742 9.80923 12.8249L9.51758 11.8683ZM3.56544 18.9402C3.45493 19.8282 4.19055 20.5 4.99996 20.5V19.5C4.70481 19.5 4.53188 19.2719 4.55778 19.0637L3.56544 18.9402ZM4.99996 20.5H19V19.5H4.99996V20.5ZM19 20.5C19.8094 20.5 20.545 19.8282 20.4345 18.9402L19.4421 19.0637C19.468 19.2719 19.2951 19.5 19 19.5V20.5ZM20.4345 18.9402C20.0164 15.5804 17.6391 12.8309 14.4823 11.8683L14.1907 12.8249C16.9761 13.6742 19.0735 16.1018 19.4421 19.0637L20.4345 18.9402Z" fill="#000000"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_15_82" x="2.55444" y="3.5" width="18.8911" height="19" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="0.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_15_82"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_15_82" result="shape"/>
+</filter>
+<clipPath id="clip0_15_82">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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}`) }}
     >
+      <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>
   );
 };

frontend/src/components/Navbar.tsx

@@ -1,9 +1,13 @@
-import { Button } from '@mui/material';
+import { Button, Input } from '@mui/material';
 import { Link } from 'react-router-dom';
+import ProfilePlaceholder from "../assets/provile.svg";
 
 export default function Navbar() {
+  // TODO: create search function
+  // TODO: Profile integration
   return (
-    <div className="flex flex-row gap-3">
+    <div className="flex flex-row justify-between">
+      <div className="flex flex-row justify-start items-center gap-3">
         <Button
           component={Link}
           to="/"
@@ -20,5 +24,36 @@ export default function Navbar() {
           Articles
         </Button>
       </div>
+
+      <div className="flex flex-row justify-end items-center gap-3">
+        <Input
+          className="
+            rounded-xl
+            bg-gray-100
+            px-2
+            py-1
+            text-sm
+            text-gray-800
+            placeholder-gray-400
+            shadow-sm
+            transition
+            duration-150
+            ease-in-out
+            focus-within:bg-white
+            focus-within:ring-2
+            focus-within:ring-gray-300
+            hover:bg-gray-200"
+          placeholder="Search" fullWidth={true} disableUnderline={true}
+        />
+        <img
+          className="
+            flex
+            h-[3em]
+            w-[3em]
+            rounded-full"
+          src={ProfilePlaceholder} alt="PFP"
+        />
+      </div>
+    </div>
   );
 };

frontend/src/pages/ArticleList.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Button } from '@mui/material';
 import type { Article } from '../types/Article.ts';
 import { ArticleListSchema } from '../types/Article.ts';
@@ -18,11 +18,13 @@ export default function ArticleList() {
 
     const json = await result.json();
     const data = ArticleListSchema.parse(json);
-    console.log(data);
     setArticles(data);
-
   };
 
+  useEffect(() => {
+    getAllArticles();
+  }, []);
+
   return (
     <div className="p-3 flex flex-col gap-5">
       <p>
@@ -32,9 +34,9 @@ export default function ArticleList() {
         style={{ border: "solid", borderWidth: "1px" }}
         onClick={() => getAllArticles()}
       >
-        Get All Articles
+        Refresh
       </Button>
-      <div>
+      <div className="flex flex-col gap-2">
         {articles.map((article) => (<ArticleCard key={article.id} article={article} />))}
       </div>
     </div >