FT_RMT_2507 CARLOS

.eslintrc.cjs

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

package.json

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

src/App.jsx

@@ -1,9 +1,27 @@
-import "./App.css";
+import { useState } from "react";
+
+import companiesJSON from "./companies.json"
+import technologiesJSON 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";
 
 function App() {
+  const [companies, setCompanies] = useState(companiesJSON);
+  const [technologies, setTechnologies] = useState(technologiesJSON);
+
   return (
     <div className="App">
-      <h1>LAB | React Stack Tracker</h1>
+      <Navbar />
+      <Routes>
+        <Route path="/" element={<HomePage companies={companies} />}></Route>
+        <Route path="/company/:companySlug" element={<CompanyPage companies={companies} />}></Route>
+        <Route path="/tech/:slug" element={<TechnologyPage technologies={technologies} />}></Route>
+      </Routes>
+
     </div>
   );
 }

src/components/CompanyTech.jsx

@@ -0,0 +1,13 @@
+import { Link } from "react-router"
+
+function CompanyTech({ techStack: { name, slug, image }, companySlug }) {
+  return (
+    <Link className="company-tech-container" to={`/tech/${slug}?company=${companySlug}`}>
+      <div className="tech-logo-container">
+        <img src={image} alt={name + " logo"} />
+      </div>
+      <h3>{name}</h3>
+    </Link>
+  )
+}
+export default CompanyTech

src/components/Navbar.jsx

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

src/components/ProfileDetail.jsx

@@ -0,0 +1,15 @@
+function ProfileDetail({logo, name, description}) {
+  return (
+    <div className="profile-info">
+      <div className="profile-logo">
+        <img src={logo} alt={name + " logo"} />
+      </div>
+      <div className="profile-text-info">
+        <h3>{name}</h3>
+        <h4>About</h4>
+        <p>{description}</p>
+      </div>
+    </div>
+  );
+}
+export default ProfileDetail;

src/index.css

@@ -22,7 +22,7 @@ a:hover {
 body {
   margin: 0;
   display: flex;
-  place-items: center;
+  /* place-items: center; */
   min-width: 320px;
   min-height: 100vh;
 }
@@ -62,3 +62,137 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+
+#root {
+  width: 100%;
+
+  .App {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+
+    nav {
+      background-color: #646cff;
+      color: white;
+      padding: 20px 10px;
+      width: 100%;
+      box-sizing: border-box;
+      font-weight: 600;
+    }
+
+    .main-container {
+      margin: 20px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      gap: 40px;
+
+      h1 {
+        font-size: 1.5em;
+        text-align: center;
+      }
+    }
+
+    .homepage-container {
+      .companies-list {
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+
+        .company-info-container {
+          width: 35%;
+          /* height: 200px; */
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          padding: 60px 10px;
+          margin: 10px;
+          box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
+          border-radius: 5px;
+          gap: 50px;
+
+          h3 {
+            margin: 0px;
+          }
+
+          img {
+            width: 125px;
+          }
+        }
+      }
+    }
+
+    .company-container {
+      display: flex;
+      flex-direction: column;
+
+      .tech-list-container {
+        display: flex;
+        align-items: center;
+        gap: 20px;
+        overflow-x: auto;
+        width: 100%;
+        flex-wrap: nowrap;
+        padding-bottom: 20px;
+
+        .company-tech-container {
+          margin-top: 100px;
+
+          .tech-logo-container {
+            box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
+            border-radius: 5px;
+            height: 100px;
+            width: 100px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            img {
+              width: 50px;
+            }
+          }
+
+          h3 {
+            font-size: 0.7em;
+            text-align: center;
+          }
+        }
+      }
+    }
+  }
+}
+
+.profile-info {
+  display: flex;
+  justify-content: center;
+  gap: 150px;
+
+  .profile-logo {
+    padding: 50px 70px;
+    margin: auto 0;
+    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
+    border-radius: 5px;
+    img {
+      width: 100px;
+    }
+  }
+
+  .profile-text-info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 30%;
+    padding: 10px;
+    h3 {
+      margin: 5px;
+    }
+    h4 {
+      margin: 0;
+    }
+    p {
+      text-align: center;
+    }
+  }
+}