WD_RMT_FT_2608_ES Diego Lázaro

.eslintrc.cjs

@@ -11,5 +11,6 @@ module.exports = {
   plugins: ['react-refresh'],
   rules: {
     'react-refresh/only-export-components': 'warn',
+    "react/prop-types": 0
   },
 }

package.json

@@ -11,8 +11,10 @@
     "test": "vitest --ui"
   },
   "dependencies": {
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.26.2"
   },
   "devDependencies": {
     "@types/react": "^18.0.37",

src/App.css

@@ -1,8 +1,22 @@
 #root {
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
+  padding: 4rem 2rem 2rem 2rem;
   text-align: center;
+  position: relative;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.navbar {
+  background-color: rgb(226, 169, 226);
+  padding: 20px;
+  font-size: 20px;
+  display: flex;
+  position: fixed;
+  width: 100vw;
+  top: 0;
+  left: 0;
 }
 
 .logo {
@@ -18,6 +32,25 @@
   filter: drop-shadow(0 0 2em #61dafbaa);
 }
 
+.lista-bottom{
+  display: flex;
+  list-style: none;
+  overflow-x: auto;
+  padding: 10px;
+  margin-top: 20px;
+  border: 1px solid #ccc;
+}
+
+.lista-bottom li {
+  display: inline-block;
+  min-width: 200px;
+  margin-right: 20px;
+  padding: 10px;
+  background-color: #f0f0f0;
+  border: 1px solid #ddd;
+}
+
+
 @keyframes logo-spin {
   from {
     transform: rotate(0deg);
@@ -33,8 +66,28 @@
   }
 }
 
-.card {
+.list {
   padding: 2em;
+
+}
+
+.list ul {
+  list-style: none;
+  justify-content: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+.card{
+  border: 2px solid black;
+  padding: 30px;
+  box-sizing: border-box;
+  width: 40%;
+}
+
+.card p {
+  color: black;
 }
 
 .read-the-docs {

src/App.jsx

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

src/components/Navbar.jsx

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

src/main.jsx

@@ -1,10 +1,12 @@
-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>
+  <BrowserRouter>
     <App />
-  </React.StrictMode>,
+  </BrowserRouter>
+
 )

src/pages/CompanyPage.jsx

@@ -1,8 +1,42 @@
-function CompanyPage() {
+import { useParams } from "react-router-dom";
+import { Link } from "react-router-dom";
+
+function CompanyPage({companies}) {
+
+  let {company} = useParams()
+
+  const companyData = companies.find((eachCompany) => {
+    return eachCompany.slug === company
+  })
+
   return (
+    <>
     <div>
-      <h1>CompanyPage</h1>
+      <h1>Company Profile</h1>
+      <div className="card">
+        <h3>{companyData.name}</h3>
+        <img className="logo" src={companyData.logo} alt="logo" />
+        <p>{companyData.description}</p>
+      </div>
+    </div>
+
+    <div>
+      <ul className="lista-bottom">
+        {companyData.techStack.map((eachTech, index) => {
+          return (
+            <li key={index}>
+              <Link to={`/tech/${eachTech.slug}?company=${companyData.slug}`}>
+              <img src={eachTech.image} alt="logo" className="logo" />
+              <p>{eachTech.name}</p>
+              </Link>
+
+            </li>
+
+          )
+        })}
+      </ul>
     </div>
+    </>
   );
 }
 

src/pages/HomePage.jsx

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