GitHub Stars

1import { Button } from "@/components/ui/button"
2import {
3  Tooltip,
4  TooltipContent,
5  TooltipTrigger,
6} from "@/components/ui/tooltip"
7 
8export type GitHubStarsProps = {
9  /** GitHub repository in `owner/repo` format. */
10  repo: string
11  /** Number of stars to display. */
12  stargazersCount: number
13  /**
14   * Optional locales for number formatting.
15   * See [MDN - Intl - locales argument](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument).
16   * @defaultValue "en-US"
17   */
18  locales?: Intl.LocalesArgument
19}
20 
21export function GitHubStars({
22  repo,
23  stargazersCount,
24  locales = "en-US",
25}: GitHubStarsProps) {
26  return (
27    <Tooltip>
28      <TooltipTrigger asChild>
29        <Button className="gap-1.5 pr-1.5 pl-2" variant="ghost" asChild>
30          <a href={`https://github.com/${repo}`} target="_blank" rel="noopener">
31            <svg viewBox="0 0 24 24">
32              <path
33                d="M12 0C5.37 0 0 5.372 0 11.997 0 17.3 3.438 21.795 8.205 23.38c.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.725-4.042-1.609-4.042-1.609C4.422 17.77 3.633 17.4 3.633 17.4c-1.087-.744.084-.73.084-.73 1.205.085 1.838 1.237 1.838 1.237 1.07 1.834 2.809 1.304 3.495.997.108-.775.417-1.304.76-1.604-2.665-.3-5.466-1.332-5.466-5.929 0-1.31.465-2.38 1.235-3.219-.135-.303-.54-1.523.105-3.175 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.4 3-.405 1.02.006 2.04.138 3 .404 2.28-1.551 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.608-2.805 5.623-5.475 5.918.42.36.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.284 0 .315.21.69.825.57C20.565 21.79 24 17.291 24 11.997 24 5.372 18.627 0 12 0"
34                fill="currentColor"
35              />
36            </svg>
37 
38            <span
39              className="text-[0.8125rem]/none text-muted-foreground tabular-nums"
40              style={{ textBox: "trim-end cap alphabetic" }}
41            >
42              {new Intl.NumberFormat(locales, {
43                notation: "compact",
44                compactDisplay: "short",
45              })
46                .format(stargazersCount)
47                .toLowerCase()}
48            </span>
49          </a>
50        </Button>
51      </TooltipTrigger>
52 
53      <TooltipContent className="tabular-nums">
54        {new Intl.NumberFormat(locales).format(stargazersCount)} stars
55      </TooltipContent>
56    </Tooltip>
57  )
58}