diff --git a/package-lock.json b/package-lock.json index eadb7c4..214800f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,8 @@ "version": "0.0.0", "dependencies": { "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-router-dom": "^6.28.0" }, "devDependencies": { "@types/react": "^18.0.37", @@ -911,6 +912,15 @@ "node": ">= 8" } }, + "node_modules/@remix-run/router": { + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.0.tgz", + "integrity": "sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==", + "license": "MIT", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@tootallnate/once": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz", @@ -3555,6 +3565,38 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.28.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.0.tgz", + "integrity": "sha512-HrYdIFqdrnhDw0PqG/AKjAqEqM7AvxCz0DQ4h2W8k6nqmc5uRBYDag0SBxx9iYz5G8gnuNVLzUe13wl9eAsXXg==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.21.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.28.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.28.0.tgz", + "integrity": "sha512-kQ7Unsl5YdyOltsPGl31zOjLrDv+m2VcIEcIHqYYD3Lp0UppLjrzcfJqDJwXxFw3TH/yvapbnUvPlAj7Kx5nbg==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.21.0", + "react-router": "6.28.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/regexp.prototype.flags": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz", @@ -5017,6 +5059,11 @@ "fastq": "^1.6.0" } }, + "@remix-run/router": { + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.0.tgz", + "integrity": "sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==" + }, "@tootallnate/once": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz", @@ -6960,6 +7007,23 @@ "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==", "dev": true }, + "react-router": { + "version": "6.28.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.0.tgz", + "integrity": "sha512-HrYdIFqdrnhDw0PqG/AKjAqEqM7AvxCz0DQ4h2W8k6nqmc5uRBYDag0SBxx9iYz5G8gnuNVLzUe13wl9eAsXXg==", + "requires": { + "@remix-run/router": "1.21.0" + } + }, + "react-router-dom": { + "version": "6.28.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.28.0.tgz", + "integrity": "sha512-kQ7Unsl5YdyOltsPGl31zOjLrDv+m2VcIEcIHqYYD3Lp0UppLjrzcfJqDJwXxFw3TH/yvapbnUvPlAj7Kx5nbg==", + "requires": { + "@remix-run/router": "1.21.0", + "react-router": "6.28.0" + } + }, "regexp.prototype.flags": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz", diff --git a/package.json b/package.json index 727f1c1..bdc2eb4 100644 --- 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": "^6.28.0" }, "devDependencies": { "@types/react": "^18.0.37", diff --git a/src/App.css b/src/App.css index b9d355d..6a1a58b 100644 --- a/src/App.css +++ b/src/App.css @@ -1,42 +1,3 @@ #root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.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; + min-height: 100vh; } diff --git a/src/App.jsx b/src/App.jsx index 1b51d87..566817c 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,9 +1,25 @@ import "./App.css"; +import companiesData from "./companies.json"; +import techonologiesData from "./technologies.json"; +import { useState } from "react"; +import { Routes, Route } from "react-router-dom"; +import HomePage from "./pages/HomePage"; +import CompanyPage from "./pages/CompanyPage"; +import TechnologyPage from "./pages/TechnologyPage"; +import Navbar from "./components/Navbar"; function App() { + const [companies, setCompanies] = useState(companiesData); + const [technologies, setTechnologies] = useState(techonologiesData) return (
-

LAB | React Stack Tracker

+ + + } /> + } /> + } /> + +
); } diff --git a/src/components/Navbar.css b/src/components/Navbar.css new file mode 100644 index 0000000..345a6c4 --- /dev/null +++ b/src/components/Navbar.css @@ -0,0 +1,9 @@ +.navbar { + background-color: #646cff; + height: 5rem; + padding: 2rem; +} +.sidebar-link { + color: white; + text-decoration: none; +} \ No newline at end of file diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 09e2806..1737eab 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,5 +1,14 @@ +import { NavLink } from "react-router-dom"; +import "./Navbar.css" + function Navbar() { - return ; + return ( + + ); } export default Navbar; diff --git a/src/index.css b/src/index.css index b121ef9..fe91634 100644 --- a/src/index.css +++ b/src/index.css @@ -1,64 +1,6 @@ -: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 { +* { + padding: 0; margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; + box-sizing: border-box; } -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - 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; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} diff --git a/src/main.jsx b/src/main.jsx index 54b39dd..1c4773a 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,10 +1,14 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -import App from './App.jsx' -import './index.css' +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App.jsx"; +import "./index.css"; -ReactDOM.createRoot(document.getElementById('root')).render( +import { BrowserRouter as Router } from "react-router-dom"; + +ReactDOM.createRoot(document.getElementById("root")).render( - - , -) + + + + +); diff --git a/src/pages/CompanyPage.css b/src/pages/CompanyPage.css new file mode 100644 index 0000000..5bc3d01 --- /dev/null +++ b/src/pages/CompanyPage.css @@ -0,0 +1,82 @@ +.h1-title { + text-align: center; + font-size: 2rem; + font-weight: bold; + margin-top: 3rem; + margin-bottom: 1.5rem; +} + +.detail-container { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding: 2rem 8rem; + gap: 15rem; + margin: 0 auto; +} + +.image-logo { + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + border-radius: 1rem; + + img { + width: 200px; + padding: 3rem; + } +} + +.details-info { + max-width: 500px; + display: flex; + flex-direction: column; + text-align: center; + h1 { + font-size: 1.5rem; + font-weight: bold; + } + h3 { + font-size: 1.2rem; + font-weight: bold; + margin: 1rem auto; + } +} + +.details-techs { + display: flex; + align-items: center; + justify-content: center; + list-style-type: none; + gap: 4rem; /* Reduced gap */ + padding: 2rem 4rem; /* Reduced padding */ + margin-top: 4rem; /* Adjusted margin for better balance */ + overflow-x: auto; /* Enable horizontal scroll */ + overflow-y: hidden; /* Hide vertical scrollbar */ + scroll-behavior: smooth; /* Smooth scrolling */ + white-space: nowrap; /* Prevent items from wrapping */ +} + +.links { + display: flex; + flex-direction: column; + gap: 2rem; + align-items: center; + text-decoration: none; + color: black; + padding: 2rem; +} +.tech-logos { + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + border-radius: 1rem; + + img { + width: 150px; + padding: 1.5rem; + } +} diff --git a/src/pages/CompanyPage.jsx b/src/pages/CompanyPage.jsx index cc5903c..d03eaa9 100644 --- a/src/pages/CompanyPage.jsx +++ b/src/pages/CompanyPage.jsx @@ -1,7 +1,42 @@ -function CompanyPage() { +import { useParams } from "react-router-dom"; +import { Link } from "react-router-dom"; +import "./CompanyPage.css"; + +function CompanyPage({ companies }) { + const { companySlug } = useParams(); + + const company = companies.find((company) => company.slug === companySlug); + return (
-

CompanyPage

+

Company Profile

+
+
+ {`Img +
+
+

{company.name}

+

About

+

{company.description}

+
+
+
+ +
); } diff --git a/src/pages/HomePage.css b/src/pages/HomePage.css new file mode 100644 index 0000000..ffdbc77 --- /dev/null +++ b/src/pages/HomePage.css @@ -0,0 +1,39 @@ +.container { + text-align: center; + padding: 5rem; + +} + +.list-container { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 10rem; + align-items: center; + padding-top: 3rem; + img { + width: 150px; + } +} + +.list-item { + list-style: none; + border: 1px solid black; + padding: 1rem; + flex: 0 1 30%; + box-sizing: border-box; + text-align: center; + + h3 { + margin-top: 3rem; + } +} + +.link { + text-decoration: none; + color: black; +} + +.link:hover { + color: rgb(171, 44, 125); +} diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx index e97e7de..e10c55b 100644 --- a/src/pages/HomePage.jsx +++ b/src/pages/HomePage.jsx @@ -1,7 +1,28 @@ -function HomePage() { +import { Link } from "react-router-dom"; +import "./HomePage.css"; + +function HomePage({companies}) { + + console.log("This is companies array: ", companies); + return ( -
-

HomePage

+
+

StackTracker: Discover Tech Stacks Used by Top Companies

+
); } diff --git a/src/pages/TechnologyPage.jsx b/src/pages/TechnologyPage.jsx index 30f9414..7a2bb3b 100644 --- a/src/pages/TechnologyPage.jsx +++ b/src/pages/TechnologyPage.jsx @@ -1,7 +1,31 @@ -function TechnologyPage() { +import { Link, useParams } from "react-router-dom"; +import { useSearchParams } from "react-router-dom"; +function TechnologyPage({ technologies }) { + const { slug } = useParams(); + + const technology = technologies.find( + (technology) => technology.slug === slug + ); + + console.log("Hello: ", technology.name); + + const companySlug = useSearchParams('company'); + + return (
-

TechnologyPage

+

Technology Details

+ {`Img +
+

{technology.name}

+

About

+

{technology.description}

+
+
); }