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:T1ad7,"use client"; import { useEffect, useMemo, useState } from "react"; import { cn } from "@/lib/utils"; interface ContributionDay { date: string; count: number; level: 0 | 1 | 2 | 3 | 4; } interface GitHubActivityCalendarProps extends React.HTMLAttributes { username: string; staticData?: ContributionDay[]; year?: number; colorScheme?: "green" | "blue" | "purple" | "orange"; } const LEVEL_COLORS = { green: [ "bg-neutral-100 dark:bg-neutral-800", "bg-green-200 dark:bg-green-900", "bg-green-400 dark:bg-green-700", "bg-green-500 dark:bg-green-500", "bg-green-600 dark:bg-green-400", ], blue: [ "bg-neutral-100 dark:bg-neutral-800", "bg-blue-200 dark:bg-blue-900", "bg-blue-400 dark:bg-blue-700", "bg-blue-500 dark:bg-blue-500", "bg-blue-600 dark:bg-blue-400", ], purple: [ "bg-neutral-100 dark:bg-neutral-800", "bg-purple-200 dark:bg-purple-900", "bg-purple-400 dark:bg-purple-700", "bg-purple-500 dark:bg-purple-500", "bg-purple-600 dark:bg-purple-400", ], orange: [ "bg-neutral-100 dark:bg-neutral-800", "bg-orange-200 dark:bg-orange-900", "bg-orange-400 dark:bg-orange-700", "bg-orange-500 dark:bg-orange-500", "bg-orange-600 dark:bg-orange-400", ], }; const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; const MONTHS = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", ]; function generateCalendarData(year: number): ContributionDay[] { const days: ContributionDay[] = []; const startDate = new Date(year, 0, 1); const endDate = new Date(year, 11, 31); const current = new Date(startDate); while (current <= endDate) { const random = Math.random(); let level: 0 | 1 | 2 | 3 | 4 = 0; if (random > 0.7) level = 1; if (random > 0.8) level = 2; if (random > 0.9) level = 3; if (random > 0.95) level = 4; days.push({ date: current.toISOString().split("T")[0], count: level * Math.floor(Math.random() * 5 + 1), level, }); current.setDate(current.getDate() + 1); } return days; } function getWeeksWithMonths( data: ContributionDay[] ): { weeks: ContributionDay[][]; monthLabels: { month: string; col: number }[] } { const weeks: ContributionDay[][] = []; const monthLabels: { month: string; col: number }[] = []; let currentWeek: ContributionDay[] = []; let lastMonth = -1; const firstDate = data[0] ? new Date(data[0].date) : new Date(); const startDay = firstDate.getDay(); for (let i = 0; i < startDay; i++) { currentWeek.push({ date: "", count: 0, level: 0 }); } for (const day of data) { const date = new Date(day.date); const dayOfWeek = date.getDay(); const month = date.getMonth(); if (dayOfWeek === 0 && currentWeek.length > 0) { weeks.push(currentWeek); currentWeek = []; } if (month !== lastMonth && dayOfWeek === 0) { monthLabels.push({ month: MONTHS[month], col: weeks.length }); lastMonth = month; } currentWeek.push(day); } if (currentWeek.length > 0) { while (currentWeek.length < 7) { currentWeek.push({ date: "", count: 0, level: 0 }); } weeks.push(currentWeek); } return { weeks, monthLabels }; } export function GitHubActivityCalendar({ username, staticData, year = new Date().getFullYear(), colorScheme = "green", className, ...props }: GitHubActivityCalendarProps) { const [data, setData] = useState(staticData || []); const [loading, setLoading] = useState(!staticData); const [totalContributions, setTotalContributions] = useState(0); useEffect(() => { if (staticData) { setTotalContributions(staticData.reduce((sum, d) => sum + d.count, 0)); return; } setLoading(true); const generated = generateCalendarData(year); setData(generated); setTotalContributions(generated.reduce((sum, d) => sum + d.count, 0)); setLoading(false); }, [username, year, staticData]); const { weeks, monthLabels } = useMemo( () => getWeeksWithMonths(data), [data] ); const colors = LEVEL_COLORS[colorScheme]; if (loading) { return (

); } return (

{totalContributions.toLocaleString()} {" "} contributions in {year}

{monthLabels.map(({ month, col }) => ( {month} ))}

{DAYS.filter((_, i) => i % 2 === 1).map((day) => ( {day} ))}

{weeks.map((week, weekIndex) => (

{week.map((day, dayIndex) => (

))}

Less {colors.map((color, i) => (

))} More

); } 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":[]}]]}],["$","$L50",null,{"sourceUrl":"https://www.tryelements.dev/r/github-activity-calendar.json","proxyUrl":"https://shadcnregistry.com/r/elements/github-activity-calendar","itemId":"@elements/github-activity-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/default/blocks/github/github-activity-calendar/components/elements/github-activity-calendar.tsx","content":"$52","type":"registry:component"}]}]]}],"$L53"]}]

GitHub Activity Calendar

Installation

Files

components

Styles