github-calendar

1"use client"
2 
3import * as React from "react"
4import { motion, AnimatePresence } from "framer-motion"
5import { cn } from "@/lib/utils"
6 
7interface ContributionDay {
8    color: string
9    contributionCount: number
10    contributionLevel: "NONE" | "FIRST_QUARTILE" | "SECOND_QUARTILE" | "THIRD_QUARTILE" | "FOURTH_QUARTILE"
11    date: string
12}
13 
14interface GithubContributionData {
15    contributions: ContributionDay[][]
16    totalContributions: number
17}
18 
19interface GithubCalendarProps {
20    username: string
21    variant?: "default" | "city-lights" | "minimal"
22    shape?: "square" | "rounded" | "circle" | "squircle"
23    glowIntensity?: number
24    className?: string
25    showTotal?: boolean
26    colorSchema?: "green" | "blue" | "purple" | "orange" | "gray"
27}
28 
29// Color schemas for custom styling
30const colorSchemas = {
31    gray: {
32        level0: "bg-zinc-100 dark:bg-zinc-900",
33        level1: "bg-zinc-300 dark:bg-zinc-800",
34        level2: "bg-zinc-400 dark:bg-zinc-700",
35        level3: "bg-zinc-600 dark:bg-zinc-500",
36        level4: "bg-zinc-800 dark:bg-zinc-300",
37    },
38    green: {
39        level0: "bg-zinc-100 dark:bg-zinc-900",
40        level1: "bg-emerald-200 dark:bg-emerald-900",
41        level2: "bg-emerald-300 dark:bg-emerald-700",
42        level3: "bg-emerald-400 dark:bg-emerald-500",
43        level4: "bg-emerald-500 dark:bg-emerald-400",
44    },
45    blue: {
46        level0: "bg-zinc-100 dark:bg-zinc-900",
47        level1: "bg-blue-200 dark:bg-blue-900",
48        level2: "bg-blue-300 dark:bg-blue-700",
49        level3: "bg-blue-400 dark:bg-blue-500",
50        level4: "bg-blue-500 dark:bg-blue-400",
51    },
52    purple: {
53        level0: "bg-zinc-100 dark:bg-zinc-900",
54        level1: "bg-purple-200 dark:bg-purple-900",
55        level2: "bg-purple-300 dark:bg-purple-700",
56        level3: "bg-purple-400 dark:bg-purple-500",
57        level4: "bg-purple-500 dark:bg-purple-400",
58    },
59    orange: {
60        level0: "bg-zinc-100 dark:bg-zinc-900",
61        level1: "bg-orange-200 dark:bg-orange-900",
62        level2: "bg-orange-300 dark:bg-orange-700",
63        level3: "bg-orange-400 dark:bg-orange-500",
64        level4: "bg-orange-500 dark:bg-orange-400",
65    },
66}
67 
68function getLevelClass(level: string, schema: keyof typeof colorSchemas = "green") {
69    const s = colorSchemas[schema]
70    switch (level) {
71        case "FIRST_QUARTILE":
72            return s.level1
73        case "SECOND_QUARTILE":
74            return s.level2
75        case "THIRD_QUARTILE":
76            return s.level3
77// … truncated