From 3b6cd4a2acff13d32abc8c8105d74639d33e95e3 Mon Sep 17 00:00:00 2001 From: Rugved Chavan Date: Wed, 29 Oct 2025 00:03:15 +0530 Subject: [PATCH 1/2] Fixed the layout of contibutors page --- src/pages/Contributors.jsx | 189 ++++++++++++++----------------------- src/styles.css | 2 +- 2 files changed, 70 insertions(+), 121 deletions(-) diff --git a/src/pages/Contributors.jsx b/src/pages/Contributors.jsx index 07f4e8a..9a61123 100644 --- a/src/pages/Contributors.jsx +++ b/src/pages/Contributors.jsx @@ -1,154 +1,103 @@ import React, { useState, useEffect } from 'react'; -import { Users, GitFork, Star, ExternalLink } from 'lucide-react'; export default function ContributorsWall() { const [contributors, setContributors] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); - const [repoInfo, setRepoInfo] = useState(null); useEffect(() => { - fetchContributors(); - fetchRepoInfo(); - }, []); + const fetchContributors = async () => { + setLoading(true); + setError(null); + try { + const response = await fetch( + 'https://api.github.com/repos/commitra/react-verse/contributors?per_page=100' + ); - const fetchRepoInfo = async () => { - try { - const response = await fetch('https://api.github.com/repos/commitra/react-verse'); - const data = await response.json(); - setRepoInfo(data); - } catch (err) { - console.error('Error fetching repo info:', err); - } - }; + if (!response.ok) { + // This will catch API rate-limit errors (403) + throw new Error(`Failed to fetch contributors: ${response.statusText}`); + } - const fetchContributors = async () => { - try { - setLoading(true); - const response = await fetch( - 'https://api.github.com/repos/commitra/react-verse/contributors?per_page=100' - ); - - if (!response.ok) { - throw new Error('Failed to fetch contributors'); + const data = await response.json(); + setContributors(data); + } catch (err) { + setError(err.message); + } finally { + setLoading(false); } - - const data = await response.json(); - setContributors(data); - setLoading(false); - } catch (err) { - setError(err.message); - setLoading(false); - } - }; + }; + + fetchContributors(); + }, []); // Empty dependency array ensures this runs once on mount if (loading) { return ( -
-
-
-

Loading contributors...

-
+
+ {/* Uses the .loading class from your stylesheet */} +

Loading contributors...

); } if (error) { return ( -
-
-

Error: {error}

-
+
+ {/* Uses the .error class from your stylesheet */} +

Error: {error}

+

You may have hit the GitHub API rate limit. Please try again later.

); } return ( -
-
- {/* Header */} -
-
- - Wall of Contributors -
-

- React-Verse Contributors -

-

- Honoring the amazing developers who made this project possible -

- - {repoInfo && ( -
-
- - {repoInfo.stargazers_count} Stars -
-
- - {repoInfo.forks_count} Forks -
-
- - {contributors.length} Contributors -
-
- )} -
+ // Uses .container for padding and .page-transition for the animation +
+ + {/* Uses .cards-title from your "Recipe" styles for a nice centered header */} +

+ React-Verse Contributors +

+

+ Honoring the amazing developers who made this project possible. +

- {/* Repository Link */} -
+ {/* Uses the .grid class from your stylesheet for the responsive layout */} + - - {/* Contributors Grid */} - - - {/* Footer */} -
-

- Thank you to all our contributors for making React-Verse awesome! 🎉 -

-
+ ))}
-
+ ); } \ No newline at end of file diff --git a/src/styles.css b/src/styles.css index c1ba1b5..c6bfdc2 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1366,4 +1366,4 @@ footer a { footer a:hover { color: var(--primary-hover); -} +} \ No newline at end of file From a324ab88a60d3b43427fdc39a1d103fe9241b5f0 Mon Sep 17 00:00:00 2001 From: Rugved Chavan Date: Wed, 29 Oct 2025 00:35:44 +0530 Subject: [PATCH 2/2] added stars and fork --- src/pages/Contributors.jsx | 102 +++++++++++++++++++++++++++---------- 1 file changed, 74 insertions(+), 28 deletions(-) diff --git a/src/pages/Contributors.jsx b/src/pages/Contributors.jsx index 9a61123..dc0565e 100644 --- a/src/pages/Contributors.jsx +++ b/src/pages/Contributors.jsx @@ -1,26 +1,37 @@ import React, { useState, useEffect } from 'react'; +// Re-importing icons for the stats +import { Users, GitFork, Star } from 'lucide-react'; export default function ContributorsWall() { const [contributors, setContributors] = useState([]); + const [repoInfo, setRepoInfo] = useState(null); // State for repo info const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { - const fetchContributors = async () => { + // Fetch both contributors and repo info at the same time + const fetchData = async () => { setLoading(true); setError(null); try { - const response = await fetch( - 'https://api.github.com/repos/commitra/react-verse/contributors?per_page=100' - ); + const [repoRes, contributorsRes] = await Promise.all([ + fetch('https://api.github.com/repos/commitra/react-verse'), + fetch('https://api.github.com/repos/commitra/react-verse/contributors?per_page=100') + ]); - if (!response.ok) { - // This will catch API rate-limit errors (403) - throw new Error(`Failed to fetch contributors: ${response.statusText}`); + // Check both responses + if (!repoRes.ok) { + throw new Error(`Failed to fetch repo info: ${repoRes.statusText}`); } + if (!contributorsRes.ok) { + throw new Error(`Failed to fetch contributors: ${contributorsRes.statusText}`); + } + + const repoData = await repoRes.json(); + const contributorsData = await contributorsRes.json(); - const data = await response.json(); - setContributors(data); + setRepoInfo(repoData); // Set the repo info + setContributors(contributorsData); } catch (err) { setError(err.message); } finally { @@ -28,13 +39,27 @@ export default function ContributorsWall() { } }; - fetchContributors(); + fetchData(); }, []); // Empty dependency array ensures this runs once on mount + // Style object for the new stat boxes + // This uses variables from your main stylesheet + const statBoxStyle = { + background: 'var(--bg-alt)', + border: '1px solid var(--border)', + padding: '0.5rem 1rem', + borderRadius: 'var(--radius)', + display: 'flex', + alignItems: 'center', + gap: '0.5rem', + fontSize: '0.9rem', + fontWeight: 500, + color: 'var(--text)' + }; + if (loading) { return (
- {/* Uses the .loading class from your stylesheet */}

Loading contributors...

); @@ -43,7 +68,6 @@ export default function ContributorsWall() { if (error) { return (
- {/* Uses the .error class from your stylesheet */}

Error: {error}

You may have hit the GitHub API rate limit. Please try again later.

@@ -51,10 +75,8 @@ export default function ContributorsWall() { } return ( - // Uses .container for padding and .page-transition for the animation
- {/* Uses .cards-title from your "Recipe" styles for a nice centered header */}

React-Verse Contributors

@@ -62,7 +84,39 @@ export default function ContributorsWall() { Honoring the amazing developers who made this project possible.

- {/* Uses the .grid class from your stylesheet for the responsive layout */} + {/* --- NEW STATS SECTION --- */} + {repoInfo && ( + // Uses .flex and .wrap from your stylesheet +
+ {/* Stat Box for Stars */} +
+ + {repoInfo.stargazers_count} Stars +
+ + {/* Stat Box for Forks */} +
+ + {repoInfo.forks_count} Forks +
+ + {/* Stat Box for Contributors */} +
+ + {contributors.length} Contributors +
+
+ )} + {/* --- END OF STATS SECTION --- */} + + {/* Uses the .grid class from your stylesheet */}