GitHub Star Counter

1"use client";
2 
3import { useEffect, useState } from "react";
4 
5import { RollingNumber } from "@/components/gsap/rolling-number";
6 
7const fetchGitHubStars = async (repo: string): Promise<number> => {
8    const res = await fetch(`https://api.github.com/repos/${repo}`);
9    if (!res.ok) throw new Error("Failed to fetch repo info");
10 
11    const data = await res.json();
12    return data.stargazers_count;
13};
14 
15export const GithubStarCounter = ({
16    repo = "paceui/gsap",
17    defaultStar = "000",
18}: {
19    repo: string;
20    defaultStar?: number | string;
21}) => {
22    const [stars, setStars] = useState<number | string>(defaultStar);
23 
24    useEffect(() => {
25        let isMounted = true;
26        fetchGitHubStars(repo).then((stars) => {
27            if (isMounted) setStars(stars);
28        });
29        return () => {
30            isMounted = false;
31        };
32    }, [repo]);
33 
34    return (
35        <a
36            className="bg-card border-foreground/5 flex items-center gap-2 rounded-full border-2 px-3 transition-all"
37            href={`https://github.com/${repo}`}
38            target="_blank">
39            <svg viewBox="0 0 438.549 438.549" className="size-4.5">
40                <path
41                    fill="currentColor"
42// … truncated