50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1339,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; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@gamifykit","registryDependencies":["card","badge"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/new-york/components/daily-streak.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]