82 |
83 |
84 | GitHub Rankings
85 |
86 |
87 | {/* Filters */}
88 |
89 |
104 |
105 |
125 |
126 | {/* Sort buttons */}
127 |
128 | {[
129 | { key: "followers", label: "Followers" },
130 | { key: "totalStars", label: "Total Stars" },
131 | { key: "contributions", label: "Contributions" },
132 | { key: "public_repos", label: "Repositories" },
133 | ].map(({ key, label }) => (
134 |
152 | ))}
153 |
154 |
155 |
156 |
157 | {error && (
158 |
159 | {error}
160 |
161 | )}
162 |
163 | {/* Results */}
164 | {loading ? (
165 |
166 | ) : (
167 | <>
168 |
169 |
170 | {data?.items.map((user, index) => (
171 |
179 |
180 |
181 |
193 |
201 |
202 |
203 |
204 | {user.name || user.login}
205 |
206 |
{user.location}
207 |
208 |
209 |
214 |
219 |
224 |
229 |
230 |
231 |
232 | ))}
233 |
234 |
235 |
236 | {/* Pagination */}
237 | {data && (
238 |
239 | {Array.from({ length: data.totalPages }, (_, i) => (
240 |
251 | ))}
252 |
253 | )}
254 | >
255 | )}
256 |
257 | );
258 | }
259 |
260 | function StatCard({
261 | label,
262 | value,
263 | highlight,
264 | }: {
265 | label: string;
266 | value: number;
267 | highlight: boolean;
268 | }) {
269 | return (
270 |