GitHub Stars Progress

1import * as React from "react";
2 
3import { Button } from "@/components/ui/button";
4import { Skeleton } from "@/components/ui/skeleton";
5import { StarIcon } from "lucide-react";
6import { cn } from "@/lib/utils";
7 
8export function GithubStarsProgress({ repo }: { repo: string }) {
9  return (
10    <React.Suspense fallback={<Skeleton className="h-6 w-18" />}>
11      <StarsCount repo={repo} />
12    </React.Suspense>
13  );
14}
15 
16export async function StarsCount({ repo }: { repo: string }) {
17  const data = await fetch(`https://api.github.com/repos/${repo}`, {
18    next: { revalidate: 86400 }, // Cache for 1 day (86400 seconds)
19  });
20  const json: { stargazers_count: number } = await data.json();
21 
22  // Calculate the progress based on the number of stars. 0-128-512-4096
23  const progress = Math.min(
24    4,
25    Math.floor(Math.log(json.stargazers_count / 8) / Math.log(8)) + 1,
26  );
27 
28  return (
29    <Button
30      nativeButton={false}
31      size="sm"
32      variant="ghost"
33      className={cn(
34        "h-8 shadow-none group",
35        progress === 2 && "dark:hover:bg-[#cd7f32]/10 hover:bg-[#cd7f32]/20",
36        progress === 3 && "dark:hover:bg-[#c0c0c0]/10 hover:bg-[#c0c0c0]/20",
37        progress === 4 && "dark:hover:bg-[#d4af37]/10 hover:bg-[#d4af37]/20",
38      )}
39      render={
40        <a
41          href={`https://github.com/${repo}`}
42          target="_blank"
43          rel="noreferrer"
44        />
45      }
46    >
47      <StarIcon
48        className={cn(
49          "fill-transparent group-hover:fill-foreground group-hover:scale-110 transition-[fill,stroke,scale] duration-200 ease-out",
50          progress === 2 &&
51            "group-hover:fill-[#cd7f32] group-hover:stroke-[#cd7f32]",
52          progress === 3 &&
53            "group-hover:fill-[#c0c0c0] group-hover:stroke-[#c0c0c0]",
54          progress === 4 &&
55            "group-hover:fill-[#d4af37] group-hover:stroke-[#d4af37]",
56        )}
57      />
58      <p className="text-xs text-muted-foreground/70 group-hover:text-muted-foreground transition-colors duration-200 ease-out">
59        <span className="tabular-nums">
60          {json.stargazers_count >= 1000
61            ? `${(json.stargazers_count / 1000).toFixed(1)}k`
62            : json.stargazers_count.toLocaleString()}
63        </span>{" "}
64        stars
65      </p>
66    </Button>
67  );
68}