"use client"; import { Play } from "lucide-react"; import { cn } from "@/lib/utils"; type Tone = | "primary" | "foreground" | "emerald" | "violet" | "sky" | "rose"; interface Toolbar17Props { current?: number; total?: number; tone?: Tone; className?: string; } const fillClasses: Record = { primary: "bg-primary", foreground: "bg-foreground", emerald: "bg-emerald-500", violet: "bg-violet-500", sky: "bg-sky-500", rose: "bg-rose-500", }; const btnClasses: Record = { primary: "bg-primary text-primary-foreground", foreground: "bg-foreground text-background", emerald: "bg-emerald-500 text-white", violet: "bg-violet-500 text-white", sky: "bg-sky-500 text-white", rose: "bg-rose-500 text-white", }; export const toolbar17Demo: Toolbar17Props = { current: 42, total: 135, tone: "foreground", }; function fmt(s: number): string { const mm = Math.floor(s / 60); const ss = Math.floor(s % 60); return `${mm.toString().padStart(2, "0")}:${ss .toString() .padStart(2, "0")}`; } export function Toolbar17({ current = 42, total = 135, tone = "foreground", className, }: Toolbar17Props) { const pct = total > 0 ? Math.max(0, Math.min(100, (current / total) * 100)) : 0; return (

{fmt(current)}

{fmt(total)}

); }