Adding routing and stub about page

client/package.json

@@ -1,19 +1,20 @@
 {
-  "name": "parcel-react-client-starter",
-  "private": true,
-  "version": "0.0.0",
-  "source": "src/index.html",
-  "scripts": {
-    "start": "parcel",
-    "build": "parcel build"
-  },
-  "dependencies": {
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0"
-  },
-  "devDependencies": {
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "parcel": "^2.14.0"
-  }
+    "name": "parcel-react-client-starter",
+    "private": true,
+    "version": "0.0.0",
+    "source": "src/index.html",
+    "scripts": {
+        "start": "parcel",
+        "build": "parcel build"
+    },
+    "dependencies": {
+        "react": "^19.1.0",
+        "react-dom": "^19.1.0",
+        "react-router": "^7.12.0"
+    },
+    "devDependencies": {
+        "@types/react": "^19.0.0",
+        "@types/react-dom": "^19.0.0",
+        "parcel": "^2.16.3"
+    }
 }

client/src/App.css

@@ -1,8 +1,12 @@
 html {
-  color-scheme: light dark;
-  font-family: system-ui;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
+    color-scheme: light dark;
+    font-family: system-ui;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+body {
+    height: 100%;
+    width: 100%;
 }

client/src/App.tsx

@@ -1,10 +1,15 @@
-import './App.css';
+import "/src/App.css";
+import { About } from "./pages/about";
+import { Root } from "./pages/root";
+import { BrowserRouter, Route, Routes } from "react-router";
 
 export function App() {
   return (
-    <>
-      <h1>Parcel React App</h1>
-      <p>Edit <code>src/App.tsx</code> to get started!</p>
-    </>
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Root />} />
+        <Route path="/about" element={<About />} />
+      </Routes>
+    </BrowserRouter>
   );
 }

client/src/components/header/header.css

@@ -0,0 +1,27 @@
+header {
+    border-color: #c6a0f6;
+    border-width: 2px;
+    border-style: solid;
+
+    position: sticky top;
+}
+
+nav {
+    padding: 0.25rem;
+    li {
+        display: inline-block;
+        list-style-type: none;
+        padding: 0.25rem;
+    }
+
+    ul {
+        margin: 0;
+        padding: 0.25rem;
+    }
+
+    a {
+        color: #cad3f5;
+        text-decoration: none;
+        font-weight: bold;
+    }
+}

client/src/components/header/index.tsx

@@ -0,0 +1,14 @@
+import "./header.css";
+import { Nav } from "./nav";
+
+export function Header() {
+  return (
+    <header>
+      <div id="hd-left" className="header-section">
+        <Nav />
+      </div>
+      <div id="hd-middle" className="header-section"></div>
+      <div id="hd-right" className="header-section"></div>
+    </header>
+  );
+}

client/src/components/header/nav.tsx

@@ -0,0 +1,17 @@
+import { Link } from "react-router";
+import "./header.css";
+
+export function Nav() {
+  return (
+    <nav>
+      <ul>
+        <li>
+          <Link to="/">Home</Link>
+        </li>
+        <li>
+          <Link to="/about">About</Link>
+        </li>
+      </ul>
+    </nav>
+  );
+}

client/src/pages/about.tsx

@@ -0,0 +1,16 @@
+import { Header } from "/src/components/header";
+import "/src/App.css";
+
+export function About() {
+  return (
+    <>
+      <Header />
+      <h1>About Starve Me Now!</h1>
+      <p>
+        Firstly, this is intended for those who have a starvation/diet control
+        fetish. This is <b>not</b> intended to help with weight loss or similar
+        reasons to fast.
+      </p>
+    </>
+  );
+}

client/src/pages/root.tsx

@@ -0,0 +1,14 @@
+import { Header } from "/src/components/header";
+import "/src/App.css";
+
+export function Root() {
+  return (
+    <>
+      <Header />
+      <h1>Starve Me Now!</h1>
+      <p>
+        Edit <code>src/App.tsx</code> to get started!
+      </p>
+    </>
+  );
+}