GitHub Stars Button

1"use client";
2 
3import { StarFilledIcon } from "@radix-ui/react-icons";
4import { useEffect, useState } from "react";
5import { Github } from "@/components/icons/social-icons";
6import { RaisedButton } from "@/registry/new-york/ui/raised-button";
7 
8interface GitHubRepo {
9	stargazers_count: number;
10	html_url: string;
11	name: string;
12	full_name: string;
13}
14 
15interface GitHubStarsButtonProps {
16	repo: string;
17	showLabel?: boolean;
18	size?: "sm" | "default" | "lg";
19	className?: string;
20}
21 
22export function GitHubStarsButton({
23	repo,
24	showLabel = true,
25	size = "sm",
26	className,
27}: GitHubStarsButtonProps) {
28	const [starCount, setStarCount] = useState<number | null>(null);
29	const [isLoading, setIsLoading] = useState(true);
30 
31	useEffect(() => {
32		let isMounted = true;
33 
34		async function fetchStars() {
35			try {
36				const response = await fetch(`https://api.github.com/repos/${repo}`);
37 
38				if (!response.ok) {
39					throw new Error("Failed to fetch repository data");
40				}
41 
42				const data: GitHubRepo = await response.json();
43 
44				if (isMounted) {
45					setStarCount(data.stargazers_count);
46					setIsLoading(false);
47				}
48			} catch (error) {
49				console.error("Error fetching GitHub stars:", error);
50				if (isMounted) {
51					setIsLoading(false);
52				}
53			}
54		}
55 
56		fetchStars();
57 
58		return () => {
59			isMounted = false;
60		};
61	}, [repo]);
62 
63	return (
64		<a
65			href={`https://github.com/${repo}`}
66			target="_blank"
67			rel="noopener noreferrer"
68		>
69			<RaisedButton
70				size={size}
71				className={`group rounded-xl border-0! ${className || ""}`}
72				color="#1c1c1c"
73			>
74				<div className="flex items-center">
75					<Github />
76					{showLabel && <span className="ml-1">GitHub</span>}
77				</div>
78				<div className="flex items-center gap-1 text-sm">
79					<StarFilledIcon className="relative top-px size-4 text-white group-hover:text-yellow-300" />
80					<span className="font-medium text-white">
81						{isLoading ? "..." : starCount || "0"}
82					</span>
83				</div>
84			</RaisedButton>
85		</a>
86	);
87}