diff --git a/package-lock.json b/package-lock.json index ce5c96c..baf51f0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "rentalog", "version": "0.0.0", "dependencies": { + "@fortawesome/free-brands-svg-icons": "^6.6.0", "@fortawesome/free-solid-svg-icons": "^6.6.0", "@fortawesome/react-fontawesome": "^0.2.2", "@radix-ui/react-accordion": "^1.2.1", @@ -23,6 +24,7 @@ "mouse-follower": "^1.1.2", "prop-types": "^15.8.1", "react": "^18.2.0", + "react-countup": "^6.5.3", "react-dom": "^18.2.0", "react-hook-form": "^7.53.1", "react-icons": "^4.12.0", @@ -929,6 +931,18 @@ "node": ">=6" } }, + "node_modules/@fortawesome/free-brands-svg-icons": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.6.0.tgz", + "integrity": "sha512-1MPD8lMNW/earme4OQi1IFHtmHUwAKgghXlNwWi9GO7QkTfD+IIaYpIai4m2YJEzqfEji3jFHX1DZI5pbY/biQ==", + "license": "(CC-BY-4.0 AND MIT)", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.6.0" + }, + "engines": { + "node": ">=6" + } + }, "node_modules/@fortawesome/free-solid-svg-icons": { "version": "6.6.0", "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz", @@ -944,6 +958,7 @@ "version": "0.2.2", "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz", "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==", + "license": "MIT", "dependencies": { "prop-types": "^15.8.1" }, @@ -2103,6 +2118,12 @@ "dev": true, "license": "MIT" }, + "node_modules/countup.js": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/countup.js/-/countup.js-2.8.0.tgz", + "integrity": "sha512-f7xEhX0awl4NOElHulrl4XRfKoNH3rB+qfNSZZyjSZhaAoUk6elvhH+MNxMmlmuUJ2/QNTWPSA7U4mNtIAKljQ==", + "license": "MIT" + }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -4756,6 +4777,18 @@ "node": ">=0.10.0" } }, + "node_modules/react-countup": { + "version": "6.5.3", + "resolved": "https://registry.npmjs.org/react-countup/-/react-countup-6.5.3.tgz", + "integrity": "sha512-udnqVQitxC7QWADSPDOxVWULkLvKUWrDapn5i53HE4DPRVgs+Y5rr4bo25qEl8jSh+0l2cToJgGMx+clxPM3+w==", + "license": "MIT", + "dependencies": { + "countup.js": "^2.8.0" + }, + "peerDependencies": { + "react": ">= 16.3.0" + } + }, "node_modules/react-dom": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", diff --git a/package.json b/package.json index e8d109b..89a6c6a 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "@fortawesome/free-brands-svg-icons": "^6.6.0", "@fortawesome/free-solid-svg-icons": "^6.6.0", "@fortawesome/react-fontawesome": "^0.2.2", "@radix-ui/react-accordion": "^1.2.1", @@ -25,6 +26,7 @@ "mouse-follower": "^1.1.2", "prop-types": "^15.8.1", "react": "^18.2.0", + "react-countup": "^6.5.3", "react-dom": "^18.2.0", "react-hook-form": "^7.53.1", "react-icons": "^4.12.0", diff --git a/src/components/Contributors-page/Contributors.css b/src/components/Contributors-page/Contributors.css index 69d1dd9..39f5437 100644 --- a/src/components/Contributors-page/Contributors.css +++ b/src/components/Contributors-page/Contributors.css @@ -1,230 +1,132 @@ -body { + +/* Stats Section */ + +.contributor-header{ background-color: #ebf5f6; } -.contributors-container { - width: 100%; - height: 100%; - padding-top: 2rem; - overflow: hidden; -} -.github-icon { - margin-right: 0.5rem; - vertical-align: middle; - fill: white; /* Adjust color as needed */ +.contributor-stats { + max-width: 1200px; + margin: 0 auto; + padding: 4rem 0; + text-align: center; } -.contributors-title { - margin-top: 0rem; - text-align: center; - color: #0077b6; - font-size: 2.5rem; - font-weight: bold; +.contributor-stats h2 { + font-size: 2rem; margin-bottom: 2rem; - text-transform: uppercase; } -.contributors-grid { - padding: 26px; - display: flex; - flex-wrap: wrap; - justify-content: center; +.contributor-stats-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; - margin-bottom: 4rem; -} - -.contributor-card { - position: relative; - width: 80%; - max-width: 18%; - display: flex; - flex-direction: column; - align-items: center; - background-color: rgb(195, 195, 240); - border: 1px solid #030398; - border-radius: 0.5rem; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); - padding: 0.5rem; - overflow: hidden; - transition: - transform 0.4s ease, - box-shadow 0.3s ease; -} - -.contributor-card:hover { - transform: scale(1.05); - box-shadow: 0 4px 6px rgba(5, 205, 208, 0.752); + margin-bottom: 40px; } -.contributor-card:hover p { - text-shadow: - 1px 1px 2px rgb(0, 225, 255), - 0 0 0.2em rgb(0, 191, 255), - 0 0 0.8em rgb(135, 206, 235); - color: rgb(0, 0, 0); - font-weight: 500; -} - -.contributor-card:hover h2 { - text-shadow: - 1px 1px 2px rgba(237, 9, 176, 0.926), - 0 0 0.2em rgb(0, 191, 255), - 0 0 0.8em rgb(135, 206, 235); - color: white; - font-size: 1.04rem; - font-weight: 600; - text-decoration: wavy; +.contributor-stat-card { + background-color: #fff; + border: 1px solid #e0e0e0; + border-radius: 10px; + padding: 1.5rem; + text-align: center; } -.contributor-card:hover .contributor-avatar { - border: 3.5px solid #89e6f0; - width: 5.2rem; - box-shadow: -2px 4px 10px 1px rgba(1, 41, 218, 0.75); - height: 5.2rem; +.contributor-stat-card .contributor-icon { + font-size: 2rem; + margin-bottom: 1rem; } -.contributor-card::before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient(152deg, #0077b6 50%, #023e8a 50%); - transition: - transform 0.3s ease-in-out, - opacity 0.3s ease-in-out; - transform: translate(-100%, -100%); - opacity: 0; - z-index: -1; +.contributor-stat-card h3 { + font-size: 2rem; + margin-bottom: 0.5rem; } -.contributor-card:hover::before { - transform: translate(0, 0); - opacity: 1; +.contributor-stat-card p { + color: #666; } -.contributor-link { - display: block; +/* Contributors Section */ +.contributor-contributors { + max-width: 1200px; + margin: auto; + padding: 4rem 0; + text-align: center; } -.contributor-avatar { - width: 5rem; - height: 5rem; - border-radius: 50%; - object-fit: cover; - margin-bottom: 1rem; - border: 2px solid #00b4d8; - transition: - border 0.4s ease-in-out, - height 0.4s ease-in-out, - width 0.4s ease-in-out, - box-shadow 0.3s ease-in-out; -} - -.contributor-name { - font-size: 1rem; - font-weight: 600; - color: #09090a; - margin-bottom: 0.5rem; - transition: - text-shadow 0.4s ease-in-out, - font-size 0.5s ease-in-out, - text-decoration 0.4s ease-in-out; +.contributor-contributors h2 { + font-size: 2.5rem; + margin-bottom: 2rem; + font-weight: 700; + color: #0077b6; + font-family: Montserrat, sans-serif; } -.contributor-contributions { - color: #043e96; - transition: text-shadow 0.4s ease-in-out; +.contributor-contributors-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; } - -/* Style for the stats section container */ -.repo-stats-section { - display: flex; - justify-content: space-around; - align-items: center; - padding: 20px; - margin: 20px 0; - background-color: #f9f9f9; - border-radius: 8px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - flex-wrap: wrap; +.contributor-contributor-card { + background-color: #c3c3f0; + border: 1px solid #e0e0e0; + border-radius: 10px; + overflow: hidden; + transition: transform 0.3s ease, box-shadow 0.3s ease; } -/* Individual stat box styling */ -.repo-stat { - text-align: center; - flex: 1; - padding: 10px; - margin: 10px; - min-width: 150px; - box-sizing: border-box; +.contributor-contributor-card:hover { + transform: translateY(-5px); + border:unset; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } -/* Stat heading */ -.repo-stat h3 { - font-size: 1em; - color: #555; - margin-bottom: 8px; - font-weight: 600; +.contributor-contributor-card img { + width: 100px; + height: 100px; + border-radius: 50%; + margin: 1.5rem auto; + display: block; + border: 4px solid #f0f0f0; } -/* Stat value */ -.repo-stat p { - font-size: 1.6em; - color: #222; - font-weight: bold; - margin: 0; +.contributor-contributor-card h3 { + font-size: 1.2rem; + margin-bottom: 0.5rem; } - -/* Responsive styles */ -@media (max-width: 768px) { - .repo-stats-section { - flex-direction: column; - align-items: stretch; - } - - .repo-stat { - margin: 10px 0; - } - - .repo-stat h3 { - font-size: 1.2em; - } - - .repo-stat p { - font-size: 1.4em; - } +.contributor-contributor-card p { + color: #666; + margin-bottom: 1rem; } -@media (max-width: 480px) { - .repo-stat h3 { - font-size: 1em; - } - - .repo-stat p { - font-size: 1.2em; - } +.contributor-contributor-card .contributor-contributions { + background-color: #f0f0f0; + padding: 0.5rem 1rem; + border-radius: 20px; + display: inline-block; + margin-bottom: 1rem; } - -/* Media Queries for Responsiveness */ -@media (max-width: 1200px) { - .contributor-card { - max-width: 33.333%; - } +.contributor-contributor-card .contributor-footer { + background-color: #f9f9f9; + padding: 1rem; + display: flex; + justify-content: space-between; + align-items: center; + border-top: outset; } -@media (max-width: 992px) { - .contributor-card { - max-width: 50%; - } +.contributor-contributor-card .contributor-footer a { + color: #333; + text-decoration: none; + display: flex; + align-items: center; + font-size: 25px; + margin: auto; } -@media (max-width: 768px) { - .contributor-card { - max-width: 97%; - } -} +.contributor-contributor-card .contributor-footer svg { + margin-right: 0.5rem; +} \ No newline at end of file diff --git a/src/components/Contributors-page/Contributors.jsx b/src/components/Contributors-page/Contributors.jsx index 0b86f57..675a738 100644 --- a/src/components/Contributors-page/Contributors.jsx +++ b/src/components/Contributors-page/Contributors.jsx @@ -1,85 +1,120 @@ -import React, { useEffect, useState } from "react"; -import axios from "axios"; -import "./Contributors.css"; - -function Contributors() { - const [contributors, setContributors] = useState([]); - const [repoStats, setRepoStats] = useState({}); - const [loading, setLoading] = useState(true); - const [error, setError] = useState(null); - - useEffect(() => { - async function fetchContributors() { +import React, { useEffect, useState } from 'react'; +import './Contributors.css'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faGithub } from '@fortawesome/free-brands-svg-icons'; +import CountUp from 'react-countup'; +import axios from 'axios'; +const Contributors = () => { + const [contributors, setContributors] = useState([]) + const [repoStats, setRepoStats] = useState({}) + const [loading, setLoading] = useState(true) + const fetchData = async () => { + try { let allContributors = []; let page = 1; - - try { - while (true) { - const response = await axios.get( - `https://api.github.com/repos/gauravsingh1281/Rentalog.in--Frontend/contributors`, - { - params: { per_page: 100, page }, - } - ); - const data = response.data; - if (data.length === 0) break; - allContributors = [...allContributors, ...data]; - page++; - } - setContributors(allContributors); - } catch (error) { - console.error("Error fetching contributors:", error.message); - setError("Failed to load contributors. Please try again later."); - } finally { - setLoading(false); - } - } - - async function fetchRepoStats() { - try { - const response = await axios.get( - `https://api.github.com/repos/gauravsingh1281/Rentalog.in--Frontend` + // Fetch contributors with pagination + while (true) { + const contributorsResponse = await fetch( + `https://api.github.com/repos/gauravsingh1281/Rentalog.in--Frontend/contributors?per_page=100&page=${page}` ); - setRepoStats(response.data); - } catch (error) { - console.error("Error fetching repository stats:", error.message); - setError("Failed to load repository stats. Please try again later."); + const contributorsData = await contributorsResponse.json(); + if (contributorsData.length === 0) break; + allContributors = [...allContributors, ...contributorsData]; + page++; } + + const repoResponse = await fetch( + 'https://api.github.com/repos/gauravsingh1281/Rentalog.in--Frontend' + ); + const repoData = await repoResponse.json(); + + setContributors(allContributors); + setRepoStats(repoData); + } catch (error) { + console.error('Error fetching data:', error); + setContributors([]); + setRepoStats({}); + } finally { + setLoading(false); } + }; - fetchContributors(); - fetchRepoStats(); - }, []); - const totalContributions = contributors.reduce( - (sum, contributor) => sum + contributor.contributions, - 0 - ); + useEffect(() => { + fetchData() + }, []) - return ( -
-

Our Contributors

+ const renderStats = () => { + const contributorsCount = contributors.length + const stats = [ + { label: 'Contributors', value: contributorsCount, icon: 'users' }, + { + label: 'Total Contributions', + value: + contributors.reduce( + (sum, contributor) => sum + contributor.contributions, + 0 + ) || 0, + icon: 'git-commit', + }, + { + label: 'GitHub Stars', + value: repoStats.stargazers_count || 0, + icon: 'star', + }, + { + label: 'Forks', + value: repoStats.forks_count || 0, + icon: 'git-branch', + }, + ] - {/* Stats Section */} -
-
-

Total Contributors

-

{contributors.length}

-
-
-

Total Contributions

-

{totalContributions}

-
-
-

GitHub Stars

-

{repoStats.stargazers_count || 0}

-
-
-

Forks

-

{repoStats.forks_count || 0}

-
+ return ( +
+ {stats.map((stat) => ( +
+
+

+ +

+

{stat.label}

+
+ ))}
+ ) + } + const renderContributors = () => { + return ( +
+ {contributors.map((contributor) => ( +
+ {contributor.login} +

{contributor.login}

+

{contributor.type}

+
+ {contributor.contributions} Contributions +
+
{/* Contributors Grid */} @@ -127,28 +162,49 @@ function Contributors() {
- {contributor.login} + {getIcon('external-link')} + -

{contributor.login}

-

- Contributions: {contributor.contributions} -

+ {getIcon('github')}
- )) - ) : ( -

No contributors found.

- )} +
+ ))}
-
- ); + ) + } + + const getIcon = (name) => { + const icons = { + // svg icons + } + return icons[name] || '' + } + + return ( + <> +
+
+ {loading ? ( +
+ ) : ( + <> +

+ Project Statistics +

+ {renderStats()} +

+ Meet Our Contributors +

+ {renderContributors()} + + )} +
+
+ + ) } -export default Contributors; \ No newline at end of file +export default Contributors \ No newline at end of file