import { cva } from "class-variance-authority"; import * as React from "react"; import { Badge } from "@/components/ui/badge"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { cn } from "@/lib/utils"; export type StreakDay = { date: Date | string; done: boolean; }; export interface DailyStreakProps extends React.ComponentProps { title?: string; currentStreak: number; bestStreak?: number; days?: StreakDay[]; daysToShow?: number; // default 7 showBestBadge?: boolean; showLabels?: boolean; // show weekday labels beneath dots } const dotVariants = cva( "size-8 rounded-full border transition-all duration-200", { variants: { state: { on: "bg-primary border-primary/80 shadow-[0_0_0_3px] shadow-primary/20", off: "bg-muted border-border", todayOn: "bg-primary border-primary/80 ring-2 ring-offset-2 ring-primary/40", todayOff: "bg-muted border-border ring-2 ring-offset-2 ring-muted-foreground/20", }, size: { sm: "size-6", md: "size-8", lg: "size-10", }, }, defaultVariants: { state: "off", size: "md", }, }, ); function normalizeDays(days?: StreakDay[], daysToShow = 7): { date: Date; done: boolean }[] { const today = new Date(); // If not provided, generate an empty array of last N days with done=false const arr: { date: Date; done: boolean }[] = []; if (!days || days.length === 0) { for (let i = daysToShow - 1; i >= 0; i--) { const d = new Date(today); d.setDate(today.getDate() - i); arr.push({ date: d, done: false }); } return arr; } // Map input to a dictionary by yyyy-mm-dd const toKey = (d: Date) => d.toISOString().slice(0, 10); const map = new Map(); for (const item of days) { const d = typeof item.date === "string" ? new Date(item.date) : item.date; map.set(toKey(d), !!item.done); } for (let i = daysToShow - 1; i >= 0; i--) { const d = new Date(today); d.setDate(today.getDate() - i); const key = toKey(d); arr.push({ date: d, done: map.get(key) ?? false }); } return arr; } function weekdayShort(date: Date) { return date.toLocaleDateString(undefined, { weekday: "short" }); } function isSameDay(a: Date, b: Date) { return ( a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate() ); } export function DailyStreak({ title = "DAILY STREAK", currentStreak, bestStreak, days, daysToShow = 7, showBestBadge = true, showLabels = true, className, ...props }: DailyStreakProps) { const normalized = React.useMemo( () => normalizeDays(days, daysToShow), [days, daysToShow], ); const today = new Date(); return ( {title} {showBestBadge && typeof bestStreak === "number" && ( 🔥 Best {bestStreak} )}

{currentStreak}

day streak

🔥 Flame icon

{normalized.map((item, idx) => { const todayFlag = isSameDay(item.date, today); const state = item.done ? todayFlag ? "todayOn" : "on" : todayFlag ? "todayOff" : "off"; return (

{showLabels && ( {weekdayShort(item.date).slice(0, 2)} )}

); })}

); } export default DailyStreak;