github-contributors

1"use client";
2 
3import { ExternalLink } from "lucide-react";
4import { motion } from "motion/react";
5import { useEffect, useMemo, useState } from "react";
6import { Card, CardContent, CardTitle } from "@/components/ui/card";
7import { Skeleton } from "@/components/ui/skeleton";
8import {
9  Tooltip,
10  TooltipContent,
11  TooltipTrigger,
12} from "@/components/ui/tooltip";
13 
14interface Contributor {
15  id: number;
16  login: string;
17  avatar_url: string;
18  html_url: string;
19  contributions: number;
20}
21 
22interface GitHubContributorsProps {
23  repo: string; // e.g. "vercel/next.js"
24  limit?: number; // number of avatars to show (not counting the +more tile)
25  className?: string;
26  token?: string; // optional GitHub token to increase rate limit
27}
28 
29export function GitHubContributors({
30  repo,
31  limit = 12,
32  className = "",
33  token,
34}: GitHubContributorsProps) {
35  const [contributors, setContributors] = useState<Contributor[]>([]);
36  const [loading, setLoading] = useState(true);
37  const [error, setError] = useState<string | null>(null);
38  const [totalCount, setTotalCount] = useState<number | null>(null);
39 
40  useEffect(() => {
41    if (!repo) return;
42    setLoading(true);
43    setError(null);
44    setTotalCount(null);
45 
46    const headers: Record<string, string> = {
47      Accept: "application/vnd.github.v3+json",
48    };
49    if (token) headers.Authorization = `token ${token}`;
50 
51    const fetchList = async () => {
52      try {
53        const listRes = await fetch(
54          `https://api.github.com/repos/${repo}/contributors?per_page=${limit}`,
55          { headers },
56        );
57        if (!listRes.ok)
58          throw new Error(
59            `GitHub API: ${listRes.status} ${listRes.statusText}`,
60          );
61        const listData: Contributor[] = await listRes.json();
62        setContributors(listData.slice(0, limit));
63 
64        // Probe for total contributors (per_page=1 -> last page = total count)
65        try {
66          const probeRes = await fetch(
67            `https://api.github.com/repos/${repo}/contributors?per_page=1`,
68            { headers },
69          );
70          if (probeRes.ok) {
71            const link = probeRes.headers.get("link");
72            if (link) {
73              const m = link.match(
74                /<[^>]+[?&]page=(\d+)[^>]*>\s*;\s*rel="last"/,
75              );
76              if (m?.[1]) {
77                const lastPage = parseInt(m[1], 10);
78                if (Number.isFinite(lastPage)) setTotalCount(lastPage);
79              }
80            } else {
81// … truncated