nav to specific articleId via url

frontend/src/components/Navbar.tsx

@@ -8,17 +8,20 @@ export default function Navbar() {
         component={Link}
         to="/"
         variant="outlined"
+        className="flex flex-1"
       >
         Home
       </Button>
 
       <Button
         component={Link}
-        to="/article"
+        to="/articleList"
         variant="outlined"
+        className="flex flex-1"
       >
         Article
       </Button>
+      <div className="flex flex-8"></div>
     </div>
   );
 };

frontend/src/index.css

@@ -1,13 +1,13 @@
 @import "tailwindcss";
 
 :root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: ubuntu-mono, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
 
   color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  color: rgba(0, 0, 0, 1);
+  background-color: #cccccc;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -15,56 +15,9 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
 body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+  padding-top: 1rem;
+  padding-left: 2rem;
+  padding-right: 2rem;
+  width: 100%;
 }

frontend/src/main.tsx

@@ -1,10 +1,11 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import { BrowserRouter, Routes, Route } from 'react-router'
-import './index.css'
-import Home from './pages/Home.tsx'
-import Article from './pages/Article.tsx'
-import Navbar from './components/Navbar.tsx'
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter, Routes, Route } from 'react-router';
+import './index.css';
+import Home from './pages/Home.tsx';
+import Article from './pages/Article.tsx';
+import ArticleList from './pages/ArticleList.tsx';
+import Navbar from './components/Navbar.tsx';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
@@ -12,7 +13,8 @@ createRoot(document.getElementById('root')!).render(
       <Navbar />
       <Routes>
         <Route path="/" element={<Home />} />
-        <Route path="/article" element={<Article />} />
+        <Route path="/article:articleId" element={<Article />} />
+        <Route path="/articleList" element={<ArticleList />} />
       </Routes>
     </BrowserRouter>
   </StrictMode>

frontend/src/pages/Article.tsx

@@ -1,7 +1,11 @@
+import { useParams } from 'react-router';
+
 export default function Article() {
+  let { articleId } = useParams();
+
   return (
     <div id="article">
-      <h1>Article</h1>
+      <h1>Article: {articleId}</h1>
     </div>
   );
 };

frontend/src/pages/ArticleList.tsx

@@ -0,0 +1,7 @@
+export default function ArticleList() {
+  return (
+    <div>
+      List of articles to be populated and searchable
+    </div>
+  );
+};