add routes, update css, initial navbar

package.json

@@ -11,13 +11,14 @@
   },
   "dependencies": {
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.28.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.11.1",
-    "@types/react": "^18.3.10",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.2",
+    "@eslint/js": "^9.15.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
     "eslint": "^9.11.1",
     "eslint-plugin-react": "^7.37.0",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",

src/About.jsx

@@ -0,0 +1,15 @@
+function About() {
+
+  return (
+    <>
+      <div>
+        <h1>About</h1>
+        <div className="card">
+          <p>Welcome to the about page...</p>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default About

src/App.css

@@ -1,5 +1,5 @@
 body {
-    background-color: green;
+    background-color: #222;
 }
 
 #root {
@@ -15,9 +15,11 @@ body {
   will-change: filter;
   transition: filter 300ms;
 }
+
 .logo:hover {
   filter: drop-shadow(0 0 2em #000e2f55);
 }
+
 @keyframes logo-spin {
   from {
     transform: rotate(0deg);
@@ -28,7 +30,7 @@ body {
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  a .logo {
+  .logo {
     animation: logo-spin infinite 60s linear;
   }
 }
@@ -40,3 +42,8 @@ body {
 .read-the-docs {
   color: #888;
 }
+
+Nav li {
+  display: inline;
+  margin: 0 1em;
+}

src/App.jsx

@@ -1,23 +1,20 @@
-import { useState } from 'react'
-import uconnOakLogo from './assets/oak-leaf-blue.png'
+import { Route, Routes } from 'react-router-dom';
 import './App.css'
+import Navbar from './Navbar'
+import Home from './Home'
+import About from './About'
+import Contact from './Contact'
 
 function App() {
-  const [count, setCount] = useState(0)
 
   return (
     <>
-      <div>
-        <a href="https://uconn.edu" target="_blank">
-          <img src={uconnOakLogo} className="logo" alt="UConn Oak Logo" />
-        </a>
-      </div>
-      <h1>Hello!</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-      </div>
+      <Navbar />
+      <Routes>
+         <Route path='/' element={<Home/>} />
+         <Route path='/about' element={<About/>} />
+         <Route path='/contact' element={<Contact/>} />
+       </Routes>
     </>
   )
 }

src/Contact.jsx

@@ -0,0 +1,15 @@
+function Contact() {
+
+  return (
+    <>
+      <div>
+        <h1>Contact</h1>
+        <div className="card">
+          <p>Contact us...</p>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default Contact

src/Home.jsx

@@ -0,0 +1,22 @@
+import { useState } from 'react'
+import uconnOakLogo from './assets/oak-leaf-blue.png'
+
+function App() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <>
+      <div>
+        <img src={uconnOakLogo} className="logo" alt="UConn Oak Logo" />
+      </div>
+      <h1>Hello!</h1>
+      <div className="card">
+        <button onClick={() => setCount((count) => count + 1)}>
+          count is {count}
+        </button>
+      </div>
+    </>
+  )
+}
+
+export default App

src/Navbar.jsx

@@ -0,0 +1,21 @@
+import { Link } from "react-router-dom";
+
+const Navbar = () => {
+  return (
+    <nav>
+      <ul>
+        <li>
+          <Link to="/">Home</Link>
+        </li>
+        <li>
+          <Link to="/about">About</Link>
+        </li>
+        <li>
+          <Link to="/contact">Contact</Link>
+        </li>
+      </ul>
+    </nav>
+  );
+}
+
+export default Navbar

src/index.css

@@ -25,7 +25,7 @@ a:hover {
 body {
   margin: 0;
   display: flex;
-  place-items: center;
+  place-items: top;
   min-width: 320px;
   min-height: 100vh;
 }

src/main.jsx

@@ -1,10 +1,13 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
 import App from './App.jsx'
 import './index.css'
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </StrictMode>,
 )