"use client"; import { PiggyBank } from "lucide-react"; import { cn } from "@/lib/utils"; type Tone = "primary" | "foreground" | "rose" | "emerald" | "violet" | "sunset"; interface Money11Props { saved?: string; goal?: string; progress?: number; label?: string; tone?: Tone; className?: string; } const tileClasses: Record = { primary: "bg-primary text-primary-foreground", foreground: "bg-foreground text-background", rose: "bg-gradient-to-br from-rose-400 to-pink-500 text-white", emerald: "bg-gradient-to-br from-emerald-400 to-teal-500 text-white", violet: "bg-gradient-to-br from-violet-500 to-fuchsia-500 text-white", sunset: "bg-gradient-to-br from-amber-400 to-orange-500 text-white", }; const barClasses: Record = { primary: "bg-primary", foreground: "bg-foreground", rose: "bg-gradient-to-r from-rose-400 to-pink-500", emerald: "bg-gradient-to-r from-emerald-400 to-teal-500", violet: "bg-gradient-to-r from-violet-500 to-fuchsia-500", sunset: "bg-gradient-to-r from-amber-400 to-orange-500", }; export const money11Demo: Money11Props = { saved: "$2,480", goal: "$5,000", progress: 50, label: "Vacation fund", tone: "rose", }; export function Money11({ saved = "$0", goal = "$0", progress = 0, label, tone = "rose", className, }: Money11Props) { const pct = Math.max(0, Math.min(100, progress)); return (

{label && ( {label} )}

{saved} of {goal}

); }