"use client"; import { AlertTriangle, Info, TriangleAlert, X } from "lucide-react"; import { cn } from "@/lib/utils"; type Severity = "error" | "warning" | "info"; interface Notification2Props { title?: string; description?: string; severity?: Severity; dismissible?: boolean; className?: string; } const severityConfig: Record< Severity, { icon: typeof Info; bubble: string } > = { error: { icon: TriangleAlert, bubble: "bg-rose-100 text-rose-600 dark:bg-rose-950 dark:text-rose-400", }, warning: { icon: AlertTriangle, bubble: "bg-amber-100 text-amber-600 dark:bg-amber-950 dark:text-amber-400", }, info: { icon: Info, bubble: "bg-sky-100 text-sky-600 dark:bg-sky-950 dark:text-sky-400", }, }; export const notification2Demo: Notification2Props = { title: "Your card was declined", description: "Update the payment method on file to retry the charge.", severity: "error", dismissible: true, }; export function Notification2({ title, description, severity = "info", dismissible = false, className, }: Notification2Props) { const config = severityConfig[severity]; const Icon = config.icon; return (

{title && ( {title} )} {description && ( {description} )}

{dismissible && ( )}

); }