GitHub Contributions

1"use client";
2 
3import { useEffect, useMemo, useState } from "react";
4 
5import { cn } from "@/lib/utils";
6 
7interface GitHubContributionsProps
8  extends React.HTMLAttributes<HTMLDivElement> {
9  owner: string;
10  repo: string;
11  staticContributions?: number;
12  staticData?: number[][];
13}
14 
15function generateRandomGrid(rows: number, cols: number): number[][] {
16  return Array.from({ length: rows }, () =>
17    Array.from({ length: cols }, () => Math.random()),
18  );
19}
20 
21interface HeatmapGridProps {
22  data: number[][];
23  className?: string;
24}
25 
26const HEATMAP_ROWS = 7;
27const HEATMAP_COLS = 12;
28const HEATMAP_CELL_SIZE = 14;
29const HEATMAP_GAP = 4;
30const HEATMAP_VIEWBOX_WIDTH =
31  HEATMAP_COLS * HEATMAP_CELL_SIZE + (HEATMAP_COLS - 1) * HEATMAP_GAP;
32const HEATMAP_VIEWBOX_HEIGHT =
33  HEATMAP_ROWS * HEATMAP_CELL_SIZE + (HEATMAP_ROWS - 1) * HEATMAP_GAP;
34 
35function HeatmapGrid({ data, className }: HeatmapGridProps) {
36  const gridData = useMemo(() => {
37    if (!data || data.length === 0) {
38      return generateRandomGrid(HEATMAP_ROWS, HEATMAP_COLS);
39    }
40    return data;
41  }, [data]);
42 
43  const rows = gridData.length;
44  const cols = gridData[0]?.length || 0;
45 
46  const cells = useMemo(() => {
47    const result: Array<{
48      x: number;
49      y: number;
50      opacity: number;
51      key: string;
52    }> = [];
53 
54    for (let row = 0; row < rows; row++) {
55      for (let col = 0; col < cols; col++) {
56        const value = gridData[row]?.[col] ?? 0;
57        result.push({
58          x: col * (HEATMAP_CELL_SIZE + HEATMAP_GAP),
59          y: row * (HEATMAP_CELL_SIZE + HEATMAP_GAP),
60          opacity: Math.max(0.05, Math.min(1, value)),
61          key: `${row}-${col}`,
62        });
63      }
64    }
65 
66    return result;
67  }, [gridData, rows, cols]);
68 
69  return (
70    <svg
71      viewBox={`0 0 ${HEATMAP_VIEWBOX_WIDTH} ${HEATMAP_VIEWBOX_HEIGHT}`}
72      fill="none"
73      preserveAspectRatio="xMidYMid meet"
74      className={cn("w-full h-auto text-muted-foreground", className)}
75      aria-hidden="true"
76    >
77      <g opacity={0.5}>
78        {cells.map((cell) => (
79          <rect
80            key={cell.key}
81            x={cell.x}
82            y={cell.y}
83            width={HEATMAP_CELL_SIZE}
84            height={HEATMAP_CELL_SIZE}
85            fill="currentColor"
86            opacity={cell.opacity}
87          />
88        ))}
89      </g>
90    </svg>
91  );
92}
93 
94export function GitHubContributions({
95  owner,
96  repo,
97  staticContributions,
98  staticData,
99  className,
100  ...props
101}: GitHubContributionsProps) {
102// … truncated