Skip to content

Commit 44d3d0e

Browse files
Hrishikesh-DalalHrishikesh-Dalal
authored
Added Contributors Wall
1 parent 82de816 commit 44d3d0e

File tree

2 files changed

+157
-1
lines changed

2 files changed

+157
-1
lines changed

‎src/App.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ import JokesQuotes from './pages/JokesQuotes.jsx';
4141
import Pets from './pages/Pets.jsx';
4242
import Covid from './pages/Covid.jsx';
4343
import Navbar from './components/Navbar.jsx';
44+
import ContributorsWall from './pages/Contributors.jsx'
4445

4546
// TODO: Extract theme state into context (see todo 5).
4647
import { useState, useEffect } from 'react';
@@ -77,7 +78,8 @@ export default function App() {
7778
<Route path="/trivia" element={<Trivia />} />
7879
<Route path="/jokes-quotes" element={<JokesQuotes />} />
7980
<Route path="/pets" element={<Pets />} />
80-
<Route path="/covid" element={<Covid />} />
81+
<Route path="/covid" element={<Covid />} />
82+
<Route path="/contributors" element={<ContributorsWall />} />
8183
</Routes>
8284
</main>
8385
</div>

‎src/pages/Contributors.jsx‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
import React, { useState, useEffect } from 'react';
2+
import { Users, GitFork, Star, ExternalLink } from 'lucide-react';
3+
4+
export default function ContributorsWall() {
5+
const [contributors, setContributors] = useState([]);
6+
const [loading, setLoading] = useState(true);
7+
const [error, setError] = useState(null);
8+
const [repoInfo, setRepoInfo] = useState(null);
9+
10+
useEffect(() => {
11+
fetchContributors();
12+
fetchRepoInfo();
13+
}, []);
14+
15+
const fetchRepoInfo = async () => {
16+
try {
17+
const response = await fetch('https://api.github.com/repos/commitra/react-verse');
18+
const data = await response.json();
19+
setRepoInfo(data);
20+
} catch (err) {
21+
console.error('Error fetching repo info:', err);
22+
}
23+
};
24+
25+
const fetchContributors = async () => {
26+
try {
27+
setLoading(true);
28+
const response = await fetch(
29+
'https://api.github.com/repos/commitra/react-verse/contributors?per_page=100'
30+
);
31+
32+
if (!response.ok) {
33+
throw new Error('Failed to fetch contributors');
34+
}
35+
36+
const data = await response.json();
37+
setContributors(data);
38+
setLoading(false);
39+
} catch (err) {
40+
setError(err.message);
41+
setLoading(false);
42+
}
43+
};
44+
45+
if (loading) {
46+
return (
47+
<div className="min-h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 flex items-center justify-center">
48+
<div className="text-center">
49+
<div className="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-purple-400 mx-auto mb-4"></div>
50+
<p className="text-white text-xl">Loading contributors...</p>
51+
</div>
52+
</div>
53+
);
54+
}
55+
56+
if (error) {
57+
return (
58+
<div className="min-h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 flex items-center justify-center">
59+
<div className="bg-red-500 bg-opacity-20 border border-red-400 rounded-lg p-6 max-w-md">
60+
<p className="text-red-200 text-center">Error: {error}</p>
61+
</div>
62+
</div>
63+
);
64+
}
65+
66+
return (
67+
<div className="min-h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 py-12 px-4">
68+
<div className="max-w-7xl mx-auto">
69+
{/* Header */}
70+
<div className="text-center mb-12">
71+
<div className="inline-block bg-purple-500 bg-opacity-20 rounded-full px-6 py-2 mb-4">
72+
<Users className="inline-block mr-2 text-purple-300" size={24} />
73+
<span className="text-purple-200 font-semibold">Wall of Contributors</span>
74+
</div>
75+
<h1 className="text-5xl font-bold text-white mb-4">
76+
React-Verse Contributors
77+
</h1>
78+
<p className="text-blue-200 text-lg mb-6">
79+
Honoring the amazing developers who made this project possible
80+
</p>
81+
82+
{repoInfo && (
83+
<div className="flex justify-center gap-6 text-white">
84+
<div className="flex items-center gap-2 bg-white bg-opacity-10 px-4 py-2 rounded-full">
85+
<Star size={20} className="text-yellow-400" />
86+
<span>{repoInfo.stargazers_count} Stars</span>
87+
</div>
88+
<div className="flex items-center gap-2 bg-white bg-opacity-10 px-4 py-2 rounded-full">
89+
<GitFork size={20} className="text-blue-400" />
90+
<span>{repoInfo.forks_count} Forks</span>
91+
</div>
92+
<div className="flex items-center gap-2 bg-white bg-opacity-10 px-4 py-2 rounded-full">
93+
<Users size={20} className="text-green-400" />
94+
<span>{contributors.length} Contributors</span>
95+
</div>
96+
</div>
97+
)}
98+
</div>
99+
100+
{/* Repository Link */}
101+
<div className="text-center mb-12">
102+
<a
103+
href="https://github.com/commitra/react-verse"
104+
target="_blank"
105+
rel="noopener noreferrer"
106+
className="inline-flex items-center gap-2 bg-white bg-opacity-10 hover:bg-opacity-20 text-white px-6 py-3 rounded-lg transition-all duration-300 hover:scale-105"
107+
>
108+
View Repository
109+
<ExternalLink size={18} />
110+
</a>
111+
</div>
112+
113+
{/* Contributors Grid */}
114+
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-6">
115+
{contributors.map((contributor, index) => (
116+
<a
117+
key={contributor.id}
118+
href={contributor.html_url}
119+
target="_blank"
120+
rel="noopener noreferrer"
121+
className="group"
122+
>
123+
<div className="bg-white bg-opacity-10 backdrop-blur-lg rounded-xl p-4 hover:bg-opacity-20 transition-all duration-300 hover:scale-105 hover:shadow-2xl border border-white border-opacity-20">
124+
<div className="relative mb-3">
125+
<img
126+
src={contributor.avatar_url}
127+
alt={contributor.login}
128+
className="w-full aspect-square rounded-full border-4 border-purple-400 group-hover:border-pink-400 transition-colors duration-300"
129+
/>
130+
<div className="absolute -bottom-2 -right-2 bg-gradient-to-r from-purple-500 to-pink-500 text-white text-xs font-bold rounded-full w-8 h-8 flex items-center justify-center border-2 border-white">
131+
#{index + 1}
132+
</div>
133+
</div>
134+
<h3 className="text-white font-semibold text-sm text-center truncate mb-1">
135+
{contributor.login}
136+
</h3>
137+
<p className="text-blue-200 text-xs text-center">
138+
{contributor.contributions} contributions
139+
</p>
140+
</div>
141+
</a>
142+
))}
143+
</div>
144+
145+
{/* Footer */}
146+
<div className="text-center mt-12">
147+
<p className="text-blue-300 text-sm">
148+
Thank you to all our contributors for making React-Verse awesome! 🎉
149+
</p>
150+
</div>
151+
</div>
152+
</div>
153+
);
154+
}

0 commit comments

Comments
 (0)