"use client"; import { Flame } from "lucide-react"; import { cn } from "@/lib/utils"; type Tone = | "neutral" | "primary" | "foreground" | "orange" | "emerald" | "sky" | "violet" | "rose" | "amber"; type DayState = "done" | "missed" | "today" | "future"; interface Education9Props { days?: number; caption?: string; week?: DayState[]; tone?: Tone; className?: string; } export const education9Demo: Education9Props = { days: 14, caption: "Show up tomorrow to keep it alive.", week: ["done", "done", "done", "missed", "done", "today", "future"], tone: "orange", }; const tileClasses: Record = { neutral: "bg-muted text-card-foreground", primary: "bg-primary text-primary-foreground", foreground: "bg-foreground text-background", orange: "bg-orange-500 text-white", emerald: "bg-emerald-500 text-white", sky: "bg-sky-500 text-white", violet: "bg-violet-500 text-white", rose: "bg-rose-500 text-white", amber: "bg-amber-500 text-white", }; const badgeTextClasses: Record = { neutral: "text-card-foreground", primary: "text-primary", foreground: "text-foreground", orange: "text-orange-600", emerald: "text-emerald-600", sky: "text-sky-600", violet: "text-violet-600", rose: "text-rose-600", amber: "text-amber-600", }; const dotActiveClasses: Record = { neutral: "bg-card-foreground", primary: "bg-primary", foreground: "bg-foreground", orange: "bg-orange-500", emerald: "bg-emerald-500", sky: "bg-sky-500", violet: "bg-violet-500", rose: "bg-rose-500", amber: "bg-amber-500", }; const dotSize: Record = { done: "size-2", missed: "size-2", today: "size-3", future: "size-2", }; const dayLabels = ["M", "T", "W", "T", "F", "S", "S"]; export function Education9({ days = 0, caption, week = [], tone = "orange", className, }: Education9Props) { return (

{days}-day streak {caption && ( {caption} )}

); }