✨ Home

package.json

@@ -24,10 +24,12 @@
     "@types/react-dom": "^18.0.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {
+    "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^5.43.0",
     "@typescript-eslint/parser": "^5.43.0",
     "autoprefixer": "^10.4.13",

src/App.tsx

@@ -1,25 +1,24 @@
-// import React from "react"
-import logo from "./common/assets/logo.svg"
+import { Routes, Route } from "react-router-dom"
+
+import { TopBar } from "common/components/ui/TopBar"
+import { NotFound404 } from "common/pages/404NotFound"
+import { Home } from "features/home"
+
 import "./common/assets/styles/App.css"
 
 export function App(): JSX.Element {
   return (
-    <div className="App bg-green-500">
-      <header className="App-header">
-        <h1 className="text-amber-300">Hiiiii</h1>
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div className="app">
+      {/* Any Pop-up modals */}
+      <div className="viewport">
+        <TopBar />
+        <div className="canvas">
+          <Routes>
+            <Route path="/" element={<Home />}></Route>
+            <Route path="*" element={<NotFound404 />}></Route>
+          </Routes>
+        </div>
+      </div>
     </div>
   )
 }

src/common/components/ui/TopBar.tsx

@@ -0,0 +1,22 @@
+import { NavLink } from "react-router-dom"
+
+import { FEATURES } from "common/constants/features"
+
+const NAV_FEATURES = [FEATURES.home, FEATURES.feedback]
+
+export function TopBar(): JSX.Element {
+  return (
+    <div className="w-full p-6 sticky top-0 z-50 bg-amber-300">
+      <nav className="flex gap-8">
+        <img src="" alt="Logo" />
+        <ul className="flex gap-8">
+          {NAV_FEATURES.map(({ title, url }) => (
+            <li>
+              <NavLink to={url}>{title}</NavLink>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </div>
+  )
+}

src/common/constants/features.tsx

@@ -0,0 +1,4 @@
+export const FEATURES = {
+  home: { title: "Home", url: "/" },
+  feedback: { title: "Feedback", url: "feedback" },
+}

src/common/pages/404NotFound.tsx

@@ -0,0 +1,11 @@
+import { Link } from "react-router-dom"
+
+export function NotFound404(): JSX.Element {
+  return (
+    <main>
+      <h1>Sorry, this page could not be found!</h1>
+      <Link to={"/"}>Return Home</Link>
+      {/* Report a bug */}
+    </main>
+  )
+}

src/features/home/index.tsx

@@ -0,0 +1,7 @@
+export function Home(): JSX.Element {
+  return (
+    <main>
+      <h1>Welcome</h1>
+    </main>
+  )
+}

src/index.css

@@ -15,3 +15,19 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+
+@layer base {
+  .app {@apply relative min-h-screen h-full flex flex-col ;}
+  .viewport {@apply min-h-screen flex flex-col items-center bg-amber-200;}
+  .canvas {@apply w-full grow flex flex-col items-center justify-center bg-slate-400;} 
+
+  /* nav {@apply bg-slate-500} */
+  main, .main { @apply flex flex-col items-center; }
+
+  a, .a { @apply text-blue-900 underline;}
+}
+
+
+
+@layer components {}

src/index.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import ReactDOM from "react-dom/client"
+import { BrowserRouter } from "react-router-dom"
 
 import { App } from "./App"
 import { reportWebVitals } from "./reportWebVitals"
@@ -8,7 +9,10 @@ import "./index.css"
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement)
 root.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      {/* BrowserRouter keeps UI in sync with the URL */}
+      <App />
+    </BrowserRouter>
   </React.StrictMode>
 )