From 62ac025105f5b35c1e2a4a19e91e080597281512 Mon Sep 17 00:00:00 2001
From: Beau Findlay <me@beaufindlay.com>
Date: Tue, 23 Apr 2024 17:35:34 +0100
Subject: [PATCH] Add react router with basic layout + home page

---
 src/Client/package-lock.json                  | 41 ++++++++++++++++++-
 src/Client/package.json                       |  3 +-
 src/Client/src/main.tsx                       |  5 ++-
 .../src/{App.tsx => pages/HomePage.tsx}       |  4 +-
 src/Client/src/pages/Layout.tsx               | 11 +++++
 src/Client/src/routes.tsx                     | 13 ++++++
 6 files changed, 70 insertions(+), 7 deletions(-)
 rename src/Client/src/{App.tsx => pages/HomePage.tsx} (65%)
 create mode 100644 src/Client/src/pages/Layout.tsx
 create mode 100644 src/Client/src/routes.tsx

diff --git a/src/Client/package-lock.json b/src/Client/package-lock.json
index 93a6300..9aec40d 100644
--- a/src/Client/package-lock.json
+++ b/src/Client/package-lock.json
@@ -9,7 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "react-router-dom": "^6.23.0"
       },
       "devDependencies": {
         "@types/react": "^18.2.66",
@@ -1060,6 +1061,14 @@
         "node": ">=14"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.0.tgz",
+      "integrity": "sha512-Quz1KOffeEf/zwkCBM3kBtH4ZoZ+pT3xIXBG4PPW/XFtDP7EGhtTiC2+gpL9GnR7+Qdet5Oa6cYSvwKYg6kN9Q==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.16.4",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.16.4.tgz",
@@ -3447,6 +3456,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.23.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.0.tgz",
+      "integrity": "sha512-wPMZ8S2TuPadH0sF5irFGjkNLIcRvOSaEe7v+JER8508dyJumm6XZB1u5kztlX0RVq6AzRVndzqcUh6sFIauzA==",
+      "dependencies": {
+        "@remix-run/router": "1.16.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.23.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.0.tgz",
+      "integrity": "sha512-Q9YaSYvubwgbal2c9DJKfx6hTNoBp3iJDsl+Duva/DwxoJH+OTXkxGpql4iUK2sla/8z4RpjAm6EWx1qUDuopQ==",
+      "dependencies": {
+        "@remix-run/router": "1.16.0",
+        "react-router": "6.23.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/src/Client/package.json b/src/Client/package.json
index a4fa32f..6120504 100644
--- a/src/Client/package.json
+++ b/src/Client/package.json
@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.23.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",
diff --git a/src/Client/src/main.tsx b/src/Client/src/main.tsx
index 3d7150d..91efbdc 100644
--- a/src/Client/src/main.tsx
+++ b/src/Client/src/main.tsx
@@ -1,10 +1,11 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
+import { RouterProvider } from 'react-router-dom'
 import './index.css'
+import router from './routes.tsx'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </React.StrictMode>,
 )
diff --git a/src/Client/src/App.tsx b/src/Client/src/pages/HomePage.tsx
similarity index 65%
rename from src/Client/src/App.tsx
rename to src/Client/src/pages/HomePage.tsx
index 30eec1a..9a570db 100644
--- a/src/Client/src/App.tsx
+++ b/src/Client/src/pages/HomePage.tsx
@@ -1,5 +1,3 @@
-function App() {
+export default function HomePage() {
   return <p className="text-3xl font-bold underline">Hello world</p>;
 }
-
-export default App;
diff --git a/src/Client/src/pages/Layout.tsx b/src/Client/src/pages/Layout.tsx
new file mode 100644
index 0000000..0405162
--- /dev/null
+++ b/src/Client/src/pages/Layout.tsx
@@ -0,0 +1,11 @@
+import { Outlet } from "react-router-dom";
+
+export default function Layout() {
+  return (
+    <div className="bg-black font-mono text-slate-50 min-h-screen antialiased">
+      <div className="flex flex-col min-h-screen mx-auto max-w-screen-2xl fade-in px-4 md:px-12 lg:px-24">
+        <Outlet />
+      </div>
+    </div>
+  );
+}
diff --git a/src/Client/src/routes.tsx b/src/Client/src/routes.tsx
new file mode 100644
index 0000000..41581a2
--- /dev/null
+++ b/src/Client/src/routes.tsx
@@ -0,0 +1,13 @@
+import { createBrowserRouter } from "react-router-dom";
+import Layout from "./pages/Layout";
+import HomePage from "./pages/HomePage";
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Layout />,
+    children: [{ index: true, element: <HomePage /> }],
+  },
+]);
+
+export default router;