"use client"; import { CalendarClock } from "lucide-react"; import { cn } from "@/lib/utils"; type Tone = | "neutral" | "primary" | "foreground" | "sky" | "emerald" | "violet" | "amber" | "rose"; interface Calendar12Props { label?: string; targetDate?: string; days?: number; hours?: number; minutes?: number; seconds?: number; tone?: Tone; className?: string; } const iconClasses: Record = { neutral: "bg-foreground text-background", primary: "bg-primary text-primary-foreground", foreground: "bg-foreground text-background", sky: "bg-sky-500 text-white", emerald: "bg-emerald-500 text-white", violet: "bg-violet-500 text-white", amber: "bg-amber-500 text-white", rose: "bg-rose-500 text-white", }; export const calendar12Demo: Calendar12Props = { label: "Launch countdown", targetDate: "May 1, 2026 · 09:00 UTC", days: 8, hours: 11, minutes: 42, seconds: 7, tone: "neutral", }; export function Calendar12({ label, targetDate, days = 0, hours = 0, minutes = 0, seconds = 0, tone = "neutral", className, }: Calendar12Props) { const units = [ { label: "days", value: days }, { label: "hrs", value: hours }, { label: "min", value: minutes }, { label: "sec", value: seconds }, ]; return (

{label && ( {label} )} {targetDate && ( {targetDate} )}

{units.map((u, idx) => (

{u.value.toString().padStart(2, "0")} {u.label}

))}

); }