From a9b128007e91b3c64cb4b3c2f5ad35bedcb7843a Mon Sep 17 00:00:00 2001 From: ozaharsh95 Date: Mon, 2 Sep 2024 21:08:54 +0530 Subject: [PATCH] feat:Project Page with Pagination and Responsiveness --- build/index.html | 6 +- "\\index.css" => index.css | 0 package-lock.json | 82 +++++++++- package.json | 2 + src/App.jsx | 43 ++--- src/assets/images/FilterIcon.svg | 3 + src/components/Navbar.jsx | 27 +++- src/components/ProjectCards.jsx | 74 ++++----- src/components/ProjectPage/Projects.jsx | 201 ++++++++++++++++++++++++ src/components/ui/button.jsx | 52 ++++++ src/components/ui/pagination.jsx | 105 +++++++++++++ src/pages/Home.jsx | 25 +++ src/pages/Project.jsx | 16 ++ tailwind.config.js | 8 +- 14 files changed, 564 insertions(+), 80 deletions(-) rename "\\index.css" => index.css (100%) create mode 100644 src/assets/images/FilterIcon.svg create mode 100644 src/components/ProjectPage/Projects.jsx create mode 100644 src/components/ui/button.jsx create mode 100644 src/components/ui/pagination.jsx create mode 100644 src/pages/Home.jsx create mode 100644 src/pages/Project.jsx diff --git a/build/index.html b/build/index.html index c14e173..0b9ffde 100644 --- a/build/index.html +++ b/build/index.html @@ -5,10 +5,10 @@ - + AFOS: African Open Source - - + +
diff --git "a/\\index.css" b/index.css similarity index 100% rename from "\\index.css" rename to index.css diff --git a/package-lock.json b/package-lock.json index 1e7cbfa..2d52f27 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,11 +9,13 @@ "version": "1.0.0", "license": "ISC", "dependencies": { + "@radix-ui/react-slot": "1.1.0", "class-variance-authority": "0.7.0", "clsx": "2.1.1", "lucide-react": "0.436.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "6.26.1", "tailwind-merge": "2.5.2", "tailwindcss-animate": "1.0.7" }, @@ -1097,6 +1099,48 @@ "node": ">=14" } }, + "node_modules/@radix-ui/react-compose-refs": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz", + "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==", + "license": "MIT", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-slot": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz", + "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-compose-refs": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@remix-run/router": { + "version": "1.19.1", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.1.tgz", + "integrity": "sha512-S45oynt/WH19bHbIXjtli6QmwNYvaz+vtnubvNpNDvUOoA/OWh6j1OikIP3G+v5GHdxyC6EXoChG3HgYGEUfcg==", + "license": "MIT", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", @@ -1167,14 +1211,14 @@ "version": "15.7.12", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz", "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==", - "dev": true, + "devOptional": true, "license": "MIT" }, "node_modules/@types/react": { "version": "18.3.4", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.4.tgz", "integrity": "sha512-J7W30FTdfCxDDjmfRM+/JqLHBIyl7xUIp9kwK637FGmY7+mkSFSe6L4jpZzhj5QMfLssSDP4/i75AKkrdC7/Jw==", - "dev": true, + "devOptional": true, "license": "MIT", "dependencies": { "@types/prop-types": "*", @@ -2019,7 +2063,7 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "dev": true, + "devOptional": true, "license": "MIT" }, "node_modules/damerau-levenshtein": { @@ -5728,6 +5772,38 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.26.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.1.tgz", + "integrity": "sha512-kIwJveZNwp7teQRI5QmwWo39A5bXRyqpH0COKKmPnyD2vBvDwgFXSqDUYtt1h+FEyfnE8eXr7oe0MxRzVwCcvQ==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.19.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.26.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.1.tgz", + "integrity": "sha512-veut7m41S1fLql4pLhxeSW3jlqs+4MtjRLj0xvuCEXsxusJCbs6I8yn9BxzzDX2XDgafrccY6hwjmd/bL54tFw==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.19.1", + "react-router": "6.26.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index d0022e9..5bb7303 100644 --- a/package.json +++ b/package.json @@ -30,11 +30,13 @@ }, "homepage": "https://github.com/chaoss/GitHub-Copilot-Hackathon-Project#readme", "dependencies": { + "@radix-ui/react-slot": "1.1.0", "class-variance-authority": "0.7.0", "clsx": "2.1.1", "lucide-react": "0.436.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "6.26.1", "tailwind-merge": "2.5.2", "tailwindcss-animate": "1.0.7" }, diff --git a/src/App.jsx b/src/App.jsx index 1cffa99..e777b67 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,25 +1,26 @@ -import Collaboration from "./components/Collaboration"; -import Empowerment from "./components/Empowerment"; -import Enhancement from "./components/Enhancement"; -import Footer from "./components/Footer"; -import Navbar from "./components/Navbar"; -import Newsletter from "./components/Newsletter"; -import Projects from "./components/Projects"; -import Hero from "./components/Hero"; - +import { BrowserRouter as Router,Routes, Route , Navigate } from "react-router-dom"; +import Home from "./pages/Home"; +import ProjectPage from "./pages/Project"; function App() { - return ( -
- - - - - - - -
-
- ); + return ( +
+ + + {/* This route is for home component + with exact path "/" */} + } /> + {/* This route is for projectPage component + with exact path "/projects" */} + } /> + {/* If any route mismatches the upper + route endpoints then, redirect triggers + and redirects app to home component with to="/" */} + {/* */} + } /> + + +
+ ); } export default App; diff --git a/src/assets/images/FilterIcon.svg b/src/assets/images/FilterIcon.svg new file mode 100644 index 0000000..0c3f5c8 --- /dev/null +++ b/src/assets/images/FilterIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 9414093..ec7b74c 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,12 +1,13 @@ /* eslint-disable no-unused-vars */ import React, { useState } from "react"; import logo from "../assets/images/afos-logo.svg"; +import { Link } from "react-router-dom"; function Navbar() { const [navOpen, setNavOpen] = useState(false); return (
- + logo