"use client"; import { Loader2, X } from "lucide-react"; import { cn } from "@/lib/utils"; type Tone = "primary" | "foreground" | "sky" | "emerald" | "violet"; interface Notification15Props { label?: string; filename?: string; percent?: number; tone?: Tone; className?: string; } const barClasses: Record = { primary: "bg-primary", foreground: "bg-foreground", sky: "bg-sky-500", emerald: "bg-emerald-500", violet: "bg-violet-500", }; const textClasses: Record = { primary: "text-primary", foreground: "text-foreground", sky: "text-sky-600 dark:text-sky-400", emerald: "text-emerald-600 dark:text-emerald-400", violet: "text-violet-600 dark:text-violet-400", }; export const notification15Demo: Notification15Props = { label: "Uploading", filename: "product-hero-final.mp4", percent: 64, tone: "sky", }; export function Notification15({ label = "Uploading", filename, percent = 0, tone = "sky", className, }: Notification15Props) { const clamped = Math.max(0, Math.min(100, percent)); return (

{filename && ( {filename} )}

); }