GitHub Star Button

1"use client";
2 
3import { useEffect, useState } from "react";
4import { cn } from "@/lib/utils";
5 
6interface GitHubStarButtonProps
7  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
8  owner: string;
9  repo: string;
10  staticCount?: number;
11  showCount?: boolean;
12  variant?: "default" | "outline";
13}
14 
15function formatNumber(num: number): string {
16  if (num >= 1000000) {
17    return `${(num / 1000000).toFixed(1)}M`;
18  }
19  if (num >= 1000) {
20    return `${(num / 1000).toFixed(1)}K`;
21  }
22  return num.toString();
23}
24 
25function StarIcon({ className }: { className?: string }) {
26  return (
27    <svg
28      className={className}
29      viewBox="0 0 16 16"
30      fill="currentColor"
31      aria-hidden="true"
32    >
33      <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.75.75 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z" />
34    </svg>
35  );
36}
37 
38export function GitHubStarButton({
39  owner,
40  repo,
41  staticCount,
42  showCount = true,
43  variant = "default",
44  className,
45  onClick,
46  ...props
47}: GitHubStarButtonProps) {
48  const [count, setCount] = useState<number | null>(staticCount ?? null);
49  const [loading, setLoading] = useState(staticCount === undefined);
50  const [isHovered, setIsHovered] = useState(false);
51 
52  useEffect(() => {
53    if (staticCount !== undefined) return;
54 
55    async function fetchCount() {
56      try {
57        setLoading(true);
58        const response = await fetch(
59          `https://api.github.com/repos/${owner}/${repo}`
60        );
61        if (response.ok) {
62          const data = await response.json();
63          setCount(data.stargazers_count);
64        }
65      } catch {
66        // Silently fail - count will remain null
67      } finally {
68        setLoading(false);
69      }
70    }
71 
72    fetchCount();
73  }, [owner, repo, staticCount]);
74 
75  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
76    window.open(`https://github.com/${owner}/${repo}`, "_blank");
77    onClick?.(e);
78  };
79 
80  const baseStyles =
81    "inline-flex items-center gap-2 h-9 px-4 rounded-md text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50";
82 
83  const variantStyles = {
84    default:
85      "bg-foreground text-background hover:bg-foreground/90 active:scale-[0.98]",
86    outline:
87// … truncated