GitHub Forks

1import * as React from "react";
2 
3import { Button } from "@/components/ui/button";
4import { Skeleton } from "@/components/ui/skeleton";
5import { GitForkIcon } from "lucide-react";
6 
7export function GithubForks({ repo }: { repo: string }) {
8  return (
9    <Button
10      nativeButton={false}
11      size="sm"
12      variant="ghost"
13      className="h-8 shadow-none group"
14      render={
15        <a
16          href={`https://github.com/${repo}`}
17          target="_blank"
18          rel="noreferrer"
19        />
20      }
21    >
22      <GitForkIcon className="group-hover:scale-110 transition-transform duration-200 ease-out" />
23      <React.Suspense fallback={<Skeleton className="h-4 w-9" />}>
24        <ForksCount repo={repo} />
25      </React.Suspense>
26    </Button>
27  );
28}
29 
30export async function ForksCount({ repo }: { repo: string }) {
31  const data = await fetch(`https://api.github.com/repos/${repo}`, {
32    next: { revalidate: 86400 }, // Cache for 1 day (86400 seconds)
33  });
34  const json: { forks_count: number } = await data.json();
35 
36  return (
37    <p className="text-xs text-muted-foreground/70 group-hover:text-muted-foreground transition-colors duration-200 ease-out">
38      <span className="tabular-nums">
39        {json.forks_count >= 1000
40          ? `${(json.forks_count / 1000).toFixed(1)}k`
41          : json.forks_count.toLocaleString()}
42      </span>{" "}
43      forks
44    </p>
45  );
46}