FT2411_ES

package.json

@@ -12,7 +12,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^7.1.3"
   },
   "devDependencies": {
     "@types/react": "^18.0.37",

src/App.css

@@ -1,42 +1,16 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+.navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000;
+  background-color: #007bff;
+  color: white;
+  padding: 10px 20px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
+body {
+  margin: 0;
+  padding-top: 60px;
 }

src/App.jsx

@@ -1,10 +1,30 @@
+import React, { useState } from "react";
+
+import { Routes, Route } from "react-router-dom";
+
+import Navbar from "./components/Navbar";
+import HomePage from "./pages/HomePage";
+import CompanyPage from "./pages/CompanyPage";
+import TechnologyPage from "./pages/TechnologyPage";
+
+import companiesData from "./companies.json";
+import technologiesData from "./technologies.json";
+
 import "./App.css";
 
 function App() {
+  const [companies, setCompanies] = useState(companiesData);
+  const [technologies, setTechnologies] = useState(technologiesData);
+
   return (
-    <div className="App">
-      <h1>LAB | React Stack Tracker</h1>
-    </div>
+    <div  style={{ maxWidth: "100vw", overflowX: "hidden" }}>
+      <Navbar />
+      <Routes>
+        <Route path="/" element={<HomePage companies={companies} />} />
+        <Route path="/company/:companySlug" element={<CompanyPage companies={companies} />} />
+        <Route path="/tech/:slug" element={<TechnologyPage />} />
+      </Routes>
+    </div >
   );
 }
 

src/components/Navbar.jsx

@@ -1,5 +1,24 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
 function Navbar() {
-  return <nav>Navbar</nav>;
+  return (
+    <div
+      className="navbar"
+    >
+      <Link
+        to="/"
+        style={{
+          color: "white",
+          textDecoration: "none",
+          fontSize: "24px",
+          fontWeight: "bold",
+        }}
+      >
+        StackTracker
+      </Link>
+    </div>
+  );
 }
 
-export default Navbar;
+export default Navbar;

src/main.jsx

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