GitHub Contributions

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5 
6// Constants
7const WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"] as const;
8const CONTRIBUTION_LEVEL_CLASSES = [
9  "bg-github-0",
10  "bg-github-1",
11  "bg-github-2",
12  "bg-github-3",
13  "bg-github-4",
14] as const;
15 
16// Types
17type ContributionLevel = 0 | 1 | 2 | 3 | 4;
18 
19export interface Contribution {
20  date: string;
21  count: number;
22  level: ContributionLevel;
23}
24 
25export interface DayContributionMap {
26  [key: number]: Contribution[];
27}
28 
29export interface ContributionCellProps {
30  contribution: Contribution;
31}
32 
33const ContributionCell = React.memo(function ContributionCell({
34  contribution,
35}: ContributionCellProps) {
36  const date = new Date(contribution.date);
37  const formattedDate = date.toLocaleString("en-US", {
38    month: "short",
39    day: "numeric",
40  });
41  const label = `${contribution.count} contributions on ${formattedDate}`;
42 
43  return (
44    <td
45      role="gridcell"
46      aria-label={label}
47      className={cn(
48        "w-2.5 p-0 rounded-xs -outline-offset-1",
49        CONTRIBUTION_LEVEL_CLASSES[contribution.level],
50      )}
51      title={label}
52    />
53  );
54});
55 
56const WeekdayLabel = React.memo(function WeekdayLabel({
57  day,
58}: {
59  day: number;
60}) {
61  return (
62    <td rowSpan={2} className="text-xs font-semibold pr-6 sm:pr-8 relative">
63      <div className="absolute -top-1 -left-1">{WEEKDAYS[day]}</div>
64    </td>
65  );
66});
67 
68const MonthLabel = React.memo(function MonthLabel({
69  date,
70  colSpan,
71}: {
72  date?: Date;
73  colSpan: number;
74}) {
75  if (!date) return <td colSpan={colSpan} />;
76  return (
77    <td
78      colSpan={colSpan}
79      className="text-xs font-semibold first-letter:uppercase"
80    >
81      {date.toLocaleString("en-US", { month: "short" })}
82    </td>
83  );
84});
85 
86export default function GitHubContributions({
87  data,
88}: {
89  data: Contribution[];
90}): React.JSX.Element {
91  const contributionsByDay = React.useMemo(() => {
92    return data.reduce<DayContributionMap>((acc, contribution) => {
93      const day = new Date(contribution.date).getDay();
94      if (!acc[day]) acc[day] = [];
95      acc[day].push(contribution);
96      return acc;
97    }, {});
98  }, [data]);
99 
100  const [lastWeekCutoff] = React.useState(
101    () => new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
102  );
103 
104  const monthLabels = React.useMemo(
105    () =>
106      data.reduce<(React.JSX.Element | null)[]>((acc, contribution, i) => {
107        const date = new Date(contribution.date);
108// … truncated