GitHub Activity Calendar

1"use client";
2 
3import { useEffect, useMemo, useState } from "react";
4import { cn } from "@/lib/utils";
5 
6interface ContributionDay {
7  date: string;
8  count: number;
9  level: 0 | 1 | 2 | 3 | 4;
10}
11 
12interface GitHubActivityCalendarProps
13  extends React.HTMLAttributes<HTMLDivElement> {
14  username: string;
15  staticData?: ContributionDay[];
16  year?: number;
17  colorScheme?: "green" | "blue" | "purple" | "orange";
18}
19 
20const LEVEL_COLORS = {
21  green: [
22    "bg-neutral-100 dark:bg-neutral-800",
23    "bg-green-200 dark:bg-green-900",
24    "bg-green-400 dark:bg-green-700",
25    "bg-green-500 dark:bg-green-500",
26    "bg-green-600 dark:bg-green-400",
27  ],
28  blue: [
29    "bg-neutral-100 dark:bg-neutral-800",
30    "bg-blue-200 dark:bg-blue-900",
31    "bg-blue-400 dark:bg-blue-700",
32    "bg-blue-500 dark:bg-blue-500",
33    "bg-blue-600 dark:bg-blue-400",
34  ],
35  purple: [
36    "bg-neutral-100 dark:bg-neutral-800",
37    "bg-purple-200 dark:bg-purple-900",
38    "bg-purple-400 dark:bg-purple-700",
39    "bg-purple-500 dark:bg-purple-500",
40    "bg-purple-600 dark:bg-purple-400",
41  ],
42  orange: [
43    "bg-neutral-100 dark:bg-neutral-800",
44    "bg-orange-200 dark:bg-orange-900",
45    "bg-orange-400 dark:bg-orange-700",
46    "bg-orange-500 dark:bg-orange-500",
47    "bg-orange-600 dark:bg-orange-400",
48  ],
49};
50 
51const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
52const MONTHS = [
53  "Jan",
54  "Feb",
55  "Mar",
56  "Apr",
57  "May",
58  "Jun",
59  "Jul",
60  "Aug",
61  "Sep",
62  "Oct",
63  "Nov",
64  "Dec",
65];
66 
67function generateCalendarData(year: number): ContributionDay[] {
68  const days: ContributionDay[] = [];
69  const startDate = new Date(year, 0, 1);
70  const endDate = new Date(year, 11, 31);
71 
72  const current = new Date(startDate);
73  while (current <= endDate) {
74    const random = Math.random();
75    let level: 0 | 1 | 2 | 3 | 4 = 0;
76    if (random > 0.7) level = 1;
77    if (random > 0.8) level = 2;
78    if (random > 0.9) level = 3;
79    if (random > 0.95) level = 4;
80 
81    days.push({
82      date: current.toISOString().split("T")[0],
83      count: level * Math.floor(Math.random() * 5 + 1),
84      level,
85    });
86 
87    current.setDate(current.getDate() + 1);
88  }
89 
90  return days;
91}
92 
93function getWeeksWithMonths(
94  data: ContributionDay[]
95): { weeks: ContributionDay[][]; monthLabels: { month: string; col: number }[] } {
96  const weeks: ContributionDay[][] = [];
97  const monthLabels: { month: string; col: number }[] = [];
98  let currentWeek: ContributionDay[] = [];
99  let lastMonth = -1;
100 
101// … truncated