Merge pull request #5 from PaulKreft/reactRouter

reactRouter

frontend/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.21.3",
     "clsx": "^2.1.0",
     "tailwind-merge": "^2.2.0"
   },

frontend/src/App.tsx

@@ -1,7 +1,19 @@
 import "./App.css";
+import { Route, Routes } from "react-router-dom";
+import Home from "./components/home.tsx";
+import NotFound from "./components/not-found.tsx";
 
 function App() {
-  return <>Welcome</>;
+  return (
+    <>
+      <div className="flex min-h-screen flex-col">
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path={"/*"} element={<NotFound />} />
+        </Routes>
+      </div>
+    </>
+  );
 }
 
 export default App;

frontend/src/components/home.tsx

@@ -0,0 +1,15 @@
+export default function Home() {
+  return (
+    <div className="flex flex-1 flex-col items-center justify-center pb-52">
+      <h1 className="text-center text-8xl font-extrabold leading-snug">
+        Welcome to <span className="text-[#3A0842]">H</span>
+        <span className="text-[#9AB87A]">e</span>
+        <span className="text-[#444B6E]">x</span>
+        <span className="text-[#247BA0]">H</span>
+        <span className="text-[#DC851F]">e</span>
+        <span className="text-[#F8F991]">x</span>
+        <span className="text-[#720026]">!</span>
+      </h1>
+    </div>
+  );
+}

frontend/src/components/not-found.tsx

@@ -0,0 +1,3 @@
+export default function NotFound() {
+  return <div>Not Found</div>;
+}

frontend/src/main.tsx

@@ -2,9 +2,12 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
 import "./index.css";
+import { BrowserRouter } from "react-router-dom";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>,
 );