diff --git a/package-lock.json b/package-lock.json index eadb7c4..2f57d2a 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.26.2" }, "devDependencies": { "@types/react": "^18.0.37", @@ -911,6 +912,15 @@ "node": ">= 8" } }, + "node_modules/@remix-run/router": { + "version": "1.19.2", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.2.tgz", + "integrity": "sha512-baiMx18+IMuD1yyvOGaHM9QrVUPGGG0jC+z+IPHnRJWUAUvaKuWKyE8gjDj2rzv3sz9zOGoRSPgeBVHRhZnBlA==", + "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.26.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.2.tgz", + "integrity": "sha512-tvN1iuT03kHgOFnLPfLJ8V95eijteveqdOSk+srqfePtQvqCExB8eHOYnlilbOcyJyKnYkr1vJvf7YqotAJu1A==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.19.2" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.26.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.2.tgz", + "integrity": "sha512-z7YkaEW0Dy35T3/QKPYB1LjMK2R1fxnHO8kWpUMTBdfVzZrWOiY9a7CtN8HqdWtDUWd5FY6Dl8HFsqVwH4uOtQ==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.19.2", + "react-router": "6.26.2" + }, + "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.19.2", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.2.tgz", + "integrity": "sha512-baiMx18+IMuD1yyvOGaHM9QrVUPGGG0jC+z+IPHnRJWUAUvaKuWKyE8gjDj2rzv3sz9zOGoRSPgeBVHRhZnBlA==" + }, "@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.26.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.2.tgz", + "integrity": "sha512-tvN1iuT03kHgOFnLPfLJ8V95eijteveqdOSk+srqfePtQvqCExB8eHOYnlilbOcyJyKnYkr1vJvf7YqotAJu1A==", + "requires": { + "@remix-run/router": "1.19.2" + } + }, + "react-router-dom": { + "version": "6.26.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.2.tgz", + "integrity": "sha512-z7YkaEW0Dy35T3/QKPYB1LjMK2R1fxnHO8kWpUMTBdfVzZrWOiY9a7CtN8HqdWtDUWd5FY6Dl8HFsqVwH4uOtQ==", + "requires": { + "@remix-run/router": "1.19.2", + "react-router": "6.26.2" + } + }, "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..c8efc6a 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.26.2" }, "devDependencies": { "@types/react": "^18.0.37", diff --git a/src/App.css b/src/App.css index b9d355d..78251c3 100644 --- a/src/App.css +++ b/src/App.css @@ -1,42 +1,196 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + #root { max-width: 1280px; margin: 0 auto; - padding: 2rem; + /* padding: 2rem; */ text-align: center; + /* display: flex; + flex-direction: column; */ + height: 100vh; +} + +h1{ + font-size: 1.5rem; + margin: 40px; +} + +.App{ + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + justify-content: flex-start; + /* border: solid 1px red; */ +} +.navbar{ + height: 80px; + background-color: rgb(73, 85, 255); + text-align: left; + display: flex; + align-items: center; + padding: 20px; + color: white; + font-weight: 700; + font-size: 1.2rem; +} + +.companies{ + display: flex; + flex-wrap: wrap; + justify-content: center; + width: 100%; + gap: 15px; +} + +.ficha-company{ + width: 300px; + height: 300px; + /* border: solid 1px red; */ + border-radius: 8px; + box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.281); + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + padding-bottom: 20px; +} + +.company-name{ + color: black; + font-size: 1.6rem; +} + +.logos{ + width: 40%; + height: 40%; + /* border: solid 1px red; */ +} + +.logos img{ + width: 100%; + height: 100%; + object-fit: contain; + /* border: solid 1px red; */ +} + +/* ---------------------------------------------------------------------- */ +/* COMPANY DETAIL */ + +.super-container{ + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +#comp-detail-container{ + width: 100%; + /* border: 1px solid red; */ + display: flex; + flex-direction: column; + align-items: center; + +} +.ficha-company-detail{ + /* border: 1px solid red; */ + display: flex; + width: 65%; + justify-content: space-around; +} + +.company-detail-img-container{ + margin: 30px; + width: 30%; + height: auto; + aspect-ratio: 1/1; + /* border: 1px solid blue; */ + align-content: center; + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.397); +} + +.company-detail-img-container img{ + width: 50%; + height: 50%; + object-fit: contain; + object-position: center; } -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; +.company-detail-text-container{ + width: 43%; + display: flex; + flex-direction: column; + gap: 20px; } -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); + +.company-detail-text-container h3{ + font-size: 2.2rem; +} +.company-detail-text-container h4{ + font-weight: 800; } -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); +.company-detail-text-container p{ + font-weight: 500; } -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +#comp-technologies-container{ + display: flex; + margin: 100px; + width: 100%; + /* border: 1px solid green; */ + overflow-x: scroll; + gap: 20px; } -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } +.card-comp-tech{ + width: 200px; + height: 200px; + flex-grow: 0; + flex-shrink: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } -.card { - padding: 2em; +.ficha-comp-tech{ + /* border: 1px solid red; */ + width: 70%; + height: 70%; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.301); } -.read-the-docs { - color: #888; +.comp-tech-img{ + width:100%; + height: 100%; + /* border: solid 1px blue; */ + align-content: center; +} + +.comp-tech-img img{ + width: 50%; + height: 50%; + object-fit: contain; + object-position: center; +} + +.return { + margin-top: 50px; + background-color: rgb(78, 121, 240); + color: white; + padding: 5px 18px; +} + +#comp-detail-container-tech{ + width: 100%; + /* border: 1px solid red; */ + display: flex; + flex-direction: column; + align-items: center; + } +/* ---------------------------------------------------------------------- */ diff --git a/src/App.jsx b/src/App.jsx index 1b51d87..6353224 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,9 +1,22 @@ import "./App.css"; +import companies from "./companies.json" +import techs from "./technologies.json" +import HomePage from './pages/HomePage' +import {Routes, Route} from 'react-router-dom' +import CompanyPage from "./pages/CompanyPage"; +import TechnologyPage from "./pages/TechnologyPage"; +import Navbar from "./components/Navbar" function App() { return (
-

LAB | React Stack Tracker

+ + {/*

LAB | React Stack Tracker.

*/} + + }/> + }/> + }/> +
); } diff --git a/src/assets/REF.png b/src/assets/REF.png new file mode 100644 index 0000000..73b262c Binary files /dev/null and b/src/assets/REF.png differ diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 09e2806..36dc543 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,5 +1,9 @@ function Navbar() { - return ; + return ( + + ) } export default Navbar; diff --git a/src/index.css b/src/index.css index b121ef9..68b957c 100644 --- a/src/index.css +++ b/src/index.css @@ -27,11 +27,6 @@ body { min-height: 100vh; } -h1 { - font-size: 3.2em; - line-height: 1.1; -} - button { border-radius: 8px; border: 1px solid transparent; diff --git a/src/main.jsx b/src/main.jsx index 54b39dd..5e114c0 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -3,8 +3,12 @@ import ReactDOM from 'react-dom/client' import App from './App.jsx' import './index.css' +import { BrowserRouter as Router } from "react-router-dom"; + ReactDOM.createRoot(document.getElementById('root')).render( - - - , + + + + + ) diff --git a/src/pages/CompanyPage.jsx b/src/pages/CompanyPage.jsx index cc5903c..c870e82 100644 --- a/src/pages/CompanyPage.jsx +++ b/src/pages/CompanyPage.jsx @@ -1,7 +1,45 @@ -function CompanyPage() { + +import "../App.css" +import { Link, useParams } from "react-router-dom"; + +function CompanyPage(props) { + const {companySlug} = useParams() + // console.log(props.comp[0].slug) + // console.log(companySlug) + const compDetail = props.comp.find((elem)=>elem.slug === companySlug) + // console.log(compDetail) + return ( -
-

CompanyPage

+
+
+

Company Profile

+
+
+ +
+
+

{compDetail.name}

+

About

+

{compDetail.description}

+
+
+
+
+ {compDetail.techStack.map((elem)=>{ + return ( + +
+
+
+ +
+
+

{elem.name}

+
+ + ) + })} +
); } diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx index e97e7de..131f371 100644 --- a/src/pages/HomePage.jsx +++ b/src/pages/HomePage.jsx @@ -1,8 +1,28 @@ -function HomePage() { +import "../App.css" + +import {Link} from 'react-router-dom' + +function HomePage(props) { + // console.log(props.comp) return ( -
-

HomePage

-
+ <> +

StackTracker: Discover Tech Stacks Used by Top Companies

+
+ {props.comp.map((elem)=>{ + // console.log(elem.id) + return( + +
+

{elem.name}

+
+ +
+
+ + ) + })} +
+ ); } diff --git a/src/pages/TechnologyPage.jsx b/src/pages/TechnologyPage.jsx index 30f9414..e448b12 100644 --- a/src/pages/TechnologyPage.jsx +++ b/src/pages/TechnologyPage.jsx @@ -1,8 +1,31 @@ -function TechnologyPage() { +import { Link, useParams, useSearchParams} from "react-router-dom"; + +function TechnologyPage(props) { + const {slug} = useParams() + const techDet = props.tech.find((elem)=>elem.slug === slug) + + const [searchParams] = useSearchParams(); + const previousPage = searchParams.get('previous') || '/'; + console.log(searchParams) + return ( -
-

TechnologyPage

+
+

Technology Details

+
+
+ +
+
+

{techDet.name}

+

About

+

{techDet.description}

+
+
+
+ + + ); }