GitHub Contributions

1"use client"
2 
3import { use } from "react"
4import { format } from "date-fns"
5 
6import { cn } from "@/lib/utils"
7import { Spinner } from "@/components/ui/spinner"
8import {
9  Tooltip,
10  TooltipContent,
11  TooltipTrigger,
12} from "@/components/ui/tooltip"
13import type { Activity } from "@/registry/components/contribution-graph"
14import {
15  ContributionGraph,
16  ContributionGraphBlock,
17  ContributionGraphCalendar,
18  ContributionGraphFooter,
19  ContributionGraphLegend,
20  ContributionGraphTotalCount,
21} from "@/registry/components/contribution-graph"
22 
23export function GitHubContributions({
24  contributions,
25  githubProfileUrl,
26  className,
27}: {
28  contributions: Promise<Activity[]>
29  githubProfileUrl: string
30  className?: string
31}) {
32  const data = use(contributions)
33 
34  return (
35    <ContributionGraph
36      className={cn("mx-auto py-2", className)}
37      data={data}
38      blockSize={11}
39      blockMargin={3}
40      blockRadius={2}
41    >
42      <ContributionGraphCalendar
43        className="no-scrollbar px-2"
44        title="GitHub Contributions"
45      >
46        {({ activity, dayIndex, weekIndex }) => (
47          <Tooltip>
48            <TooltipTrigger asChild>
49              <g>
50                <ContributionGraphBlock
51                  activity={activity}
52                  dayIndex={dayIndex}
53                  weekIndex={weekIndex}
54                />
55              </g>
56            </TooltipTrigger>
57            <TooltipContent className="font-sans">
58              <p>
59                {activity.count} contribution{activity.count > 1 ? "s" : null}{" "}
60                on {format(new Date(activity.date), "dd.MM.yyyy")}
61              </p>
62            </TooltipContent>
63          </Tooltip>
64        )}
65      </ContributionGraphCalendar>
66 
67      <ContributionGraphFooter className="px-2">
68        <ContributionGraphTotalCount>
69          {({ totalCount, year }) => (
70            <div className="text-muted-foreground">
71              {totalCount.toLocaleString("en")} contributions in {year} on{" "}
72              <a
73                className="text-foreground link-underline"
74                href={githubProfileUrl}
75                target="_blank"
76                rel="noopener"
77              >
78                GitHub
79              </a>
80              .
81            </div>
82          )}
83        </ContributionGraphTotalCount>
84 
85        <ContributionGraphLegend />
86      </ContributionGraphFooter>
87    </ContributionGraph>
88  )
89}
90 
91export function GitHubContributionsFallback() {
92  return (
93// … truncated