GitHub Pull Requests

1import * as React from "react";
2 
3import { Button } from "@/components/ui/button";
4import { Skeleton } from "@/components/ui/skeleton";
5import { GitPullRequestArrowIcon } from "lucide-react";
6 
7export function GithubPR({ 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      <GitPullRequestArrowIcon className="group-hover:scale-110 transition-transform duration-200 ease-out" />
23      <React.Suspense fallback={<Skeleton className="h-4 w-20" />}>
24        <PRCount repo={repo} />
25      </React.Suspense>
26    </Button>
27  );
28}
29 
30export async function PRCount({ repo }: { repo: string }) {
31  const data = await fetch(
32    `https://api.github.com/search/issues?q=repo:${repo}+is:pr+is:open`,
33    {
34      next: { revalidate: 86400 }, // Cache for 1 day (86400 seconds)
35    },
36  );
37  const json: { total_count: number } = await data.json();
38 
39  return (
40    <p className="text-xs text-muted-foreground/70 group-hover:text-muted-foreground transition-colors duration-200 ease-out">
41      <span className="tabular-nums">
42        {json.total_count >= 1000
43          ? `${(json.total_count / 1000).toFixed(1)}k`
44          : json.total_count.toLocaleString()}
45      </span>{" "}
46      pull requests
47    </p>
48  );
49}