Streak Calendar

1"use client"
2 
3import * as React from "react"
4import * as TooltipPrimitive from "@radix-ui/react-tooltip"
5import { Check, Snowflake } from "lucide-react"
6 
7import { cn } from "@/lib/utils"
8 
9// Types (inlined - only fields used by this component)
10interface StreakPeriod {
11  periodStart: string
12  periodEnd: string
13  usedFreeze?: boolean
14}
15 
16function formatDateKey(date: Date): string {
17  const year = date.getFullYear()
18  const month = String(date.getMonth() + 1).padStart(2, "0")
19  const day = String(date.getDate()).padStart(2, "0")
20  return `${year}-${month}-${day}`
21}
22 
23// Helper to check if a date falls within a streak period
24function isDateInPeriod(date: Date, period: StreakPeriod): boolean {
25  const d = formatDateKey(date)
26  return d >= period.periodStart && d <= period.periodEnd
27}
28 
29// Helper to check if date used a freeze
30function didUseFreezeOnDate(date: Date, periods: StreakPeriod[]): boolean {
31  for (const period of periods) {
32    if (isDateInPeriod(date, period) && period.usedFreeze) {
33      return true
34    }
35  }
36  return false
37}
38 
39// Helper to check if date was active in streak
40function wasDateActive(date: Date, periods: StreakPeriod[]): boolean {
41  for (const period of periods) {
42    if (isDateInPeriod(date, period)) {
43      return true
44    }
45  }
46  return false
47}
48 
49// Get days in month
50function getDaysInMonth(year: number, month: number): number {
51  return new Date(year, month + 1, 0).getDate()
52}
53 
54// Get day of week for first day of month (0 = Sunday)
55function getFirstDayOfMonth(year: number, month: number): number {
56  return new Date(year, month, 1).getDay()
57}
58 
59// Props
60interface StreakCalendarProps extends React.HTMLAttributes<HTMLDivElement> {
61  /** Streak periods */
62  streak: StreakPeriod[]
63  /** Calendar layout variant */
64  view?: "week" | "month" | "year"
65  /** Month to display (default: current month) */
66  month?: Date
67  /** Date used for week view (default: today) */
68  referenceDate?: Date
69  /** Show freeze indicators */
70  showFreezes?: boolean
71  /** Start of week: 0 = Sunday, 1 = Monday */
72  startOfWeek?: 0 | 1
73  /** Callback when a day is clicked */
74  onDayClick?: (date: Date, wasActive: boolean) => void
75}
76 
77const WEEKDAYS_SUNDAY = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
78const WEEKDAYS_MONDAY = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"]
79 
80const TooltipProvider = TooltipPrimitive.Provider
81const Tooltip = TooltipPrimitive.Root
82const TooltipTrigger = TooltipPrimitive.Trigger
83const TooltipContent = React.forwardRef<
84// … truncated