GitHub Graph

1"use client";
2 
3import { Activity, ActivityCalendar } from "react-activity-calendar";
4import { memo, useCallback, useEffect, useState } from "react";
5 
6import { useTheme } from "next-themes";
7 
8/**
9 * Props for the GitHub contribution graph component
10 */
11type GithubGraphProps = {
12  /** GitHub username to fetch contributions for */
13  username: string;
14  /** Margin between contribution blocks in pixels */
15  blockMargin?: number;
16  /** Custom color palette for light theme */
17  lightColorPalette?: string[];
18  /** Custom color palette for dark theme */
19  darkColorPalette?: string[];
20};
21 
22/**
23 * API response type for GitHub contributions
24 */
25type GithubApiResponse = {
26  data: Activity[];
27  error?: string;
28};
29 
30const DEFAULT_LIGHT_PALETTE = [
31  "#ebedf0",
32  "#9be9a8",
33  "#40c463",
34  "#30a14e",
35  "#216e39",
36];
37 
38const DEFAULT_DARK_PALETTE = [
39  "#1e1e2f",
40  "#5a3e7a",
41  "#7e5aa2",
42  "#a87cc3",
43  "#d9a9e6",
44];
45 
46/**
47 * GitHub contribution graph component that displays user's contribution activity
48 */
49export const GithubGraph = memo(({
50  username,
51  blockMargin,
52  lightColorPalette = DEFAULT_LIGHT_PALETTE,
53  darkColorPalette = DEFAULT_DARK_PALETTE,
54}: GithubGraphProps) => {
55  const [contribution, setContribution] = useState<Activity[]>([]);
56  const [loading, setIsLoading] = useState<boolean>(true);
57  const [error, setError] = useState<string | null>(null);
58  const { theme } = useTheme();
59 
60  const fetchData = useCallback(async () => {
61    try {
62      setError(null);
63      setIsLoading(true);
64      const contributions = await fetchContributionData(username);
65      setContribution(contributions);
66    } catch (error) {
67      setError(error instanceof Error ? error.message : "Failed to fetch contribution data");
68      setContribution([]);
69    } finally {
70      setIsLoading(false);
71    }
72  }, [username]);
73 
74  useEffect(() => {
75    fetchData();
76  }, [fetchData]);
77 
78  const label = {
79    totalCount: `{{count}} contributions in the last year`,
80  };
81 
82  if (error) {
83    return (
84      <div className="text-red-500 p-4 text-center">
85        Error: {error}
86      </div>
87    );
88  }
89 
90  return (
91    <div className="relative">
92      {loading && (
93        <div className="absolute inset-0 flex items-center justify-center">
94          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 dark:border-white"></div>
95        </div>
96      )}
97      <ActivityCalendar
98        data={contribution}
99        maxLevel={4}
100        blockMargin={blockMargin ?? 2}
101        loading={loading}
102// … truncated