4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T5d35,"use client" import { memo, useMemo, useState, useEffect, useId, useRef } from "react" import { cn } from "@/lib/utils" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" // ─── Types ──────────────────────────────────────────────────────────────────── export type ContributionLevel = 0 | 1 | 2 | 3 | 4 export type ContributionData = { [date: string]: { level: ContributionLevel label?: string count?: number } } export type ThemeColors = { level0: string level1: string level2: string level3: string level4: string } export type CellShape = "rounded" | "circle" export type GithubCalendarProps = { username?: string // GitHub username data?: ContributionData //Optional - Only for manual data startDate?: string endDate?: string startsOnSunday?: boolean //Want to start weeks on Sunday or not ? cellSize?: number cellGap?: number cellShape?: CellShape //Rounded | Circle theme?: "github" | "blue" | "sunset" | "purple" | "gray" | ThemeColors showMonthLabels?: boolean // Want the month labels on top showStats?: boolean showLegend?: boolean className?: string // Custom class for custom styling } // ─── Built-in themes ────────────────────────────────────────────────────────── const THEMES: Record = { github: { level0: "#ebedf0", level1: "#9be9a8", level2: "#40c463", level3: "#30a14e", level4: "#216e39", }, blue: { level0: "#eff6ff", level1: "#bfdbfe", level2: "#60a5fa", level3: "#2563eb", level4: "#1e3a8a", }, sunset: { level0: "#fff7ed", level1: "#fed7aa", level2: "#fb923c", level3: "#ea580c", level4: "#7c2d12", }, purple: { level0: "#faf5ff", level1: "#e9d5ff", level2: "#a855f7", level3: "#7e22ce", level4: "#3b0764", }, gray: { level0: "#f3f4f6", level1: "#d1d5db", level2: "#9ca3af", level3: "#4b5563", level4: "#111827", }, } const DARK_THEMES: Record = { github: { level0: "#161b22", level1: "#0e4429", level2: "#006d32", level3: "#26a641", level4: "#39d353", }, blue: { level0: "#161e2b", level1: "#1e3a5f", level2: "#1d4ed8", level3: "#3b82f6", level4: "#93c5fd", }, sunset: { level0: "#261a13", level1: "#7c2d12", level2: "#c2410c", level3: "#f97316", level4: "#fdba74", }, purple: { level0: "#191124", level1: "#3b0764", level2: "#6b21a8", level3: "#a855f7", level4: "#d8b4fe", }, gray: { level0: "#13181f", level1: "#374151", level2: "#6b7280", level3: "#9ca3af", level4: "#e5e7eb", }, } // ─── Helpers ────────────────────────────────────────────────────────────────── function parseDate(dateStr: string): Date { const parts = dateStr.split("-").map(Number) const y = parts[0] ?? 0 const m = parts[1] ?? 1 const d = parts[2] ?? 1 return new Date(y, m - 1, d) } function formatDate(date: Date): string { const y = date.getFullYear() const m = String(date.getMonth() + 1).padStart(2, "0") const d = String(date.getDate()).padStart(2, "0") return `${y}-${m}-${d}` } function addDays(date: Date, days: number): Date { const d = new Date(date) d.setDate(d.getDate() + days) return d } const MONTH_NAMES = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] // ─── API fetch ──────────────────────────────────────────────────────────────── type APIResponse = { total: Record contributions: { date: string; count: number; level: number }[] } async function fetchContributions(username: string): Promise { const res = await fetch(`https://github-contributions-api.jogruber.de/v4/${username}`) if (!res.ok) { throw new Error(`Could not fetch contributions for "${username}" (${res.status})`) } const json: APIResponse = await res.json() const result: ContributionData = {} for (const entry of json.contributions) { result[entry.date] = { level: Math.min(4, Math.max(0, entry.level)) as ContributionLevel, count: entry.count, } } return result } // ─── Build calendar grid ────────────────────────────────────────────────────── function buildGrid( startDate: string, endDate: string, startsOnSunday: boolean ): { weeks: (string | null)[][]; monthLabels: { label: string; weekIndex: number }[]; gridStart: string } { const start = parseDate(startDate) const end = parseDate(endDate) const startDay = startsOnSunday ? 0 : 1 const startDow = start.getDay() const offset = ((startDow - startDay) + 7) % 7 const gridStart = addDays(start, -offset) const weeks: (string | null)[][] = [] const monthLabels: { label: string; weekIndex: number }[] = [] let current = new Date(gridStart) let weekIndex = 0 let lastMonth = -1 while (current <= end || (weeks.length > 0 && (weeks[weeks.length - 1]?.length ?? 0) < 7)) { const week: (string | null)[] = [] for (let d = 0; d < 7; d++) { const dateStr = formatDate(current) const isInRange = current >= start && current <= end week.push(isInRange ? dateStr : null) if (isInRange && current.getMonth() !== lastMonth) { lastMonth = current.getMonth() monthLabels.push({ label: MONTH_NAMES[current.getMonth()]!, weekIndex }) } current = addDays(current, 1) } weeks.push(week) weekIndex++ if (current > end && weeks.length > 0 && (weeks[weeks.length - 1]?.every((d) => d === null || parseDate(d) > end) ?? false)) break } return { weeks, monthLabels, gridStart: formatDate(gridStart) } } // ─── Tooltip state type ─────────────────────────────────────────────────────── type TooltipState = { visible: boolean date: string count: number | undefined label: string | undefined x: number y: number } // ─── Loading Skeleton ───────────────────────────────────────────────────────── function CalendarSkeleton({ cellSize = 12, cellGap = 3, className }: { cellSize?: number; cellGap?: number; className?: string }) { const step = cellSize + cellGap const weeks = 53 const days = 7 return (

) } // ─── Main component ─────────────────────────────────────────────────────────── export const GithubCalendar = memo(function GithubCalendar({ username, data: dataProp, startDate, endDate, startsOnSunday = true, cellSize = 12, cellGap = 3, cellShape = "rounded", theme = "github", showMonthLabels = true, showStats = true, showLegend = true, className, }: GithubCalendarProps) { const id = useId() // Scroll ref — used to auto-scroll to most recent months on compact viewports const scrollRef = useRef(null) const [isDark, setIsDark] = useState(false) useEffect(() => { const checkDark = () => { setIsDark( document.documentElement.classList.contains("dark") || document.body.classList.contains("dark") ) } checkDark() const observer = new MutationObserver(checkDark) const opts = { attributes: true, attributeFilter: ["class"] } observer.observe(document.documentElement, opts) observer.observe(document.body, opts) return () => observer.disconnect() }, []) // ── Fetch state ──────────────────────────────────────────────────────── const [fetchedData, setFetchedData] = useState(null) const [loading, setLoading] = useState(!!username) const [fetchError, setFetchError] = useState(null) useEffect(() => { if (!username) return setFetchedData(null) setFetchError(null) setLoading(true) fetchContributions(username) .then((d) => setFetchedData(d)) .catch((e) => setFetchError(e instanceof Error ? e.message : String(e))) .finally(() => setLoading(false)) }, [username]) // ── Choose data source ───────────────────────────────────────────────── const data: ContributionData = dataProp ?? fetchedData ?? {} // ── Resolve dates ────────────────────────────────────────────────────── const resolvedEnd = endDate ?? formatDate(new Date()) const resolvedStart = useMemo(() => { if (startDate) return startDate const d = parseDate(resolvedEnd) d.setFullYear(d.getFullYear() - 1) d.setDate(d.getDate() + 1) return formatDate(d) }, [startDate, resolvedEnd]) // ── Resolve theme colors ─────────────────────────────────────────────── const lightColors: ThemeColors = typeof theme === "object" ? theme : (THEMES[theme] ?? THEMES.github!) const darkColors: ThemeColors = typeof theme === "object" ? theme : (DARK_THEMES[theme] ?? DARK_THEMES.github!) const activeColors = isDark ? darkColors : lightColors // ── Tooltip state ────────────────────────────────────────────────────── const [tooltip, setTooltip] = useState({ visible: false, date: "", count: undefined, label: undefined, x: 0, y: 0, }) // ── Build grid ───────────────────────────────────────────────────────── const { weeks, monthLabels, gridStart } = useMemo( () => buildGrid(resolvedStart, resolvedEnd, startsOnSunday), [resolvedStart, resolvedEnd, startsOnSunday] ) // ── Stats ────────────────────────────────────────────────────────────── const stats = useMemo(() => { const entries = Object.entries(data) const total = entries.reduce((sum, [, v]) => sum + (v.count ?? (v.level > 0 ? 1 : 0)), 0) const activeDays = entries.filter(([, v]) => v.level > 0).length const maxStreak = (() => { let max = 0 let cur = 0 const sorted = entries .filter(([, v]) => v.level > 0) .map(([d]) => d) .sort() for (let i = 0; i < sorted.length; i++) { if (i === 0) { cur = 1; max = 1; continue } const prev = parseDate(sorted[i - 1]!) const curr = parseDate(sorted[i]!) const diff = (curr.getTime() - prev.getTime()) / 86400000 if (diff === 1) { cur++; max = Math.max(max, cur) } else cur = 1 } return max })() return { total, activeDays, maxStreak } }, [data]) // ── Dimensions ──────────────────────────────────────────────────────── const step = cellSize + cellGap const monthLabelHeight = showMonthLabels ? 20 : 0 const svgWidth = weeks.length * step - cellGap const svgHeight = monthLabelHeight + 7 * step - cellGap // Auto-scroll to the right end (most recent months) — must be before early returns useEffect(() => { if (scrollRef.current) { scrollRef.current.scrollLeft = scrollRef.current.scrollWidth } }, [fetchedData, dataProp]) // ── Loading / error states ─────────────────────────── if (loading) { return } if (fetchError) { return (

{fetchError}

) } const cellRx = cellShape === "circle" ? cellSize / 2 : cellSize * 0.2 return (

{/* tooltip */} {tooltip.visible && (

{tooltip.label ? tooltip.label : tooltip.count !== undefined ? `${tooltip.count} contribution${tooltip.count !== 1 ? "s" : ""}` : data[tooltip.date]?.level !== undefined ? `Level ${data[tooltip.date]?.level}` : "No contributions"}

{tooltip.date}

)}

{/* legend (left) */} {showLegend && (

Less {([0, 1, 2, 3, 4] as ContributionLevel[]).map((level) => ( ))} More

)} {/* stats line (right) */} {showStats && (

{username && ( @{username} )} contributed {stats.total.toLocaleString()} this year on GitHub

)}

) }) GithubCalendar.displayName = "GithubCalendar"4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4f",null,{"registryDependencies":["tooltip"]}]]}],["$","$L50",null,{"sourceUrl":"https://grootstudio.vercel.app/r/github-calendar.json","proxyUrl":"https://shadcnregistry.com/r/grootstudio/github-calendar","itemId":"@grootstudio/github-calendar"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"registry/radix-nova/github-calendar/github-calendar.tsx","content":"$52","type":"registry:component","target":"@components/grootstudio/github-calendar.tsx"}]}]]}],"$L53"]}]

GitHub Calendar

Installation

Files

@components

Styles