Solved Lab

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.1"
   },
   "devDependencies": {
     "@types/react": "^18.0.37",

src/App.jsx

@@ -1,9 +1,31 @@
 import "./App.css";
+import { useState } from "react";
+
+import companiesData from './companies.json'
+import technologiesData from './technologies.json'
+
+import Navbar from "./components/Navbar";
+
+import CompanyPage from "./pages/CompanyPage";
+import HomePage from "./pages/HomePage";
+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} technologies={technologies} />} />
+      <Route path="/tech/:slug" element={<TechnologyPage companies={companies}/>}/>
+
+
+      </Routes>
     </div>
   );
 }

src/components/Navbar.jsx

@@ -1,5 +1,12 @@
+import { Link } from "react-router-dom";
+
 function Navbar() {
-  return <nav>Navbar</nav>;
+
+  return <nav className="navbar">
+
+    <Link to={'/'}><p className="navbar-link">StackTracker</p></Link>
+
+    </nav>;
 }
 
 export default Navbar;

src/index.css

@@ -50,6 +50,72 @@ button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
 
+.companies-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px; 
+  justify-content: center;
+  margin-top: 20px;
+}
+
+.company-card {
+  text-decoration: none; 
+  color: black;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 10px;
+  background-color: #f9f9f9;
+  width: 150px;
+  text-align: center;
+  transition: transform 0.2s; /*cuantos tiempo va a tardar */
+}
+
+.company-card:hover {
+  transform: translateY(-5px); /*cuantos pixeles va a subir */
+}
+
+.company-card img {
+  width: 100%; 
+  height: auto; 
+  align-items: center;
+  justify-content: center;
+}
+
+.company-card h3 {
+  margin-top: 10px;
+  font-size: 16px;
+}
+
+
+
+
+
+
+
+.navbar {
+  position: absolute;
+  background-color: purple;
+  color: white;   
+  top: 0;
+  left: 0;
+  width: 100%;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 
+}
+.navbar-link {
+  text-decoration: none; 
+  color: black;
+  padding: 10px 20px;
+  text-align: left;
+  font-size: 18px;
+  font-weight: bold;
+  width: auto;
+
+}
+
+
+
+
+
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;

src/main.jsx

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

src/pages/CompanyPage.jsx

@@ -1,7 +1,75 @@
-function CompanyPage() {
+import { useParams } from "react-router-dom";
+
+function CompanyPage({ companies, technologies }) {
+  const { companySlug } = useParams();
+  console.log(companySlug);
+  console.log(companies, technologies);
+  const company = companies.find((comp) => comp.slug === companySlug);
+
+  const containerStyle = {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "20px",
+    justifyContent: "center",
+    width: "100%",
+  };
+  const cardStyle = {
+    border: "1px solid grey",
+    borderRadius: "10px",
+    padding: "10px",
+    width: "200px",
+    textAlign: "center",
+    minWidth: "150px",
+    boxSizing: "border-box",
+  };
+  const imageStyle = {
+    width: "100%",
+    height: "120px",
+    objectFit: "contain",
+    borderRadius: "8px",
+  };
+
+  const textStyle = {
+    fontSize: "14px",
+    marginTop: "10px",
+  };
+
   return (
-    <div>
-      <h1>CompanyPage</h1>
+    <div style={{ padding: "20px", alignContent: "center" }}>
+      <h1 style={{ fontSize: "30px", textAlign: "center", marginTop: "50px" }}>
+        Company Profile
+      </h1>
+      <div style={{ display: "flex", justifyContent:'center', marginBottom:'50px' }}>
+        <div style={{ alignContent: "center", marginRight: "20px" }}>
+          <img
+            src={company.logo}
+            alt={company.slug}
+            style={{ width: "200px", minWidth: "150px" }}
+          />
+        </div>
+        <div>
+          <h1 style={{ fontSize: "45px" }}>{company.name}</h1>
+          <p>
+
+            <strong>about</strong>
+          </p>
+          <p style={{ width: "400px" }}>{company.description}</p>
+        </div>
+      </div>
+      <div style={containerStyle}>
+        {company.techStack.map((eachComTech) => {
+          return (
+            <div key={company.id} style={cardStyle}>
+              <img
+                src={eachComTech.image}
+                alt={eachComTech.slug}
+                style={imageStyle}
+              />
+              <p style={textStyle}>{eachComTech.name}</p>
+            </div>
+          );
+        })}
+      </div>
     </div>
   );
 }

src/pages/HomePage.jsx

@@ -1,7 +1,22 @@
-function HomePage() {
+import { Link } from "react-router-dom";
+
+function HomePage({companies}) {
+  console.log(companies)
+
   return (
-    <div>
-      <h1>HomePage</h1>
+    <div className="homepage-container">
+      <h3>StackTracker: Discover Tech Stacks Used by Top Companies</h3>
+      <div className="companies-list">
+      {companies.map((eachCompany) => {
+        return(
+        <Link to={`/company/${eachCompany.slug}`} key={eachCompany.id} className="company-card">
+        <div>
+        <h3>{eachCompany.name}</h3>
+        <img src={eachCompany.logo} alt={eachCompany.slug} />
+        </div>
+        </Link>)
+      })}
+      </div>
     </div>
   );
 }

src/pages/TechnologyPage.jsx

@@ -1,7 +1,7 @@
 function TechnologyPage() {
   return (
     <div>
-      <h1>TechnologyPage</h1>
+      <h1>Technologhy Detalis</h1>
     </div>
   );
 }