ironhack-labs · RoniPG · Nov 29, 2024 · Nov 29, 2024 · Nov 29, 2024 · Nov 29, 2024
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -11,5 +11,6 @@ module.exports = {
   plugins: ['react-refresh'],
   rules: {
     'react-refresh/only-export-components': 'warn',
+    'react/prop-types': 'off'
   },
 }
diff --git a/index.html b/index.html
@@ -5,6 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>LAB Stack Tracker</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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.0.1"
   },
   "devDependencies": {
     "@types/react": "^18.0.37",

diff --git a/src/App.css b/src/App.css
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,9 +1,28 @@
-import "./App.css";
+/* eslint-disable no-unused-vars */
+
+import { useState } from "react";
+import companiesData from "./companies.json";
+import technologiesData from "./technologies.json";
+import Navbar from "./components/Navbar";
+import HomePage from "./pages/HomePage";
+import CompanyPage from "./pages/CompanyPage";
+import TechnologyPage from "./pages/TechnologyPage";
+import { Route, Routes } from "react-router-dom";
+
 
 function App() {
+  const [companies, setCompanies] = useState(companiesData);
+  const [technologies, setTechnologies] = useState(technologiesData);
+
   return (
     <div className="App">
-      <h1>LAB | React Stack Tracker</h1>
+      <Navbar  />
+      <Routes>
+        <Route path="/" element={<HomePage companies={companies}/>} />
+        <Route path="/company/:companySlug" element={<CompanyPage companies={companies}/>} />
+        <Route path="/tech/:slug" element={<TechnologyPage technologies={technologies}/>} />
+      </Routes>
+
     </div>
   );
 }

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -1,5 +1,11 @@
 function Navbar() {
-  return <nav>Navbar</nav>;
+  return (
+    <nav className="navbar bg-primary">
+      <div className="container-fluid">
+        <span className="ps-2 text-light fs-1">StackTracker</span>
+      </div>
+    </nav>
+  );
 }
 
 export default Navbar;
diff --git a/src/index.css b/src/index.css
@@ -1,64 +1,36 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
+.scroll-container {
   display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+  overflow-x: auto;
+  /* Habilita el desplazamiento horizontal */
+  white-space: nowrap;
+  /* Evita que los elementos se ajusten a nuevas líneas */
+  padding: 10px;
+  scroll-behavior: smooth;
+  /* Hace que el scroll sea suave */
 }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
+/* Elementos dentro del scroll */
+.scroll-item {
+  flex: 0 0 auto;
+  /* Los elementos no colapsan y respetan su ancho */
+  width: 250px;
+  /* Ancho fijo para los elementos (ajusta según tus necesidades) */
+  height: 200px;
+  margin-right: 10px;
+  /* Espaciado entre elementos */
+  display: flex;
+  justify-content: center;
+  align-items: center;
   border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+  overflow: hidden;
+  font-size: 1.5rem;
+  font-weight: bold;
+  text-align: center;
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
+.border-like-button {
+  border: 2px solid transparent;
+  border-radius: 8px;
+  background: linear-gradient(white, white) padding-box, 
+  linear-gradient(to right, #007bff, #0056b3) border-box;
+}