"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; type ToastVariant = "info" | "success" | "warning" | "error"; interface ToastItem { description?: string; duration?: number; id: string; title: string; variant?: ToastVariant; } interface ToastContextValue { addToast: (toast: Omit) => void; removeToast: (id: string) => void; toasts: ToastItem[]; } const ToastContext = React.createContext(null); export function useToast() { const ctx = React.useContext(ToastContext); if (!ctx) { throw new Error("useToast must be used within ToastProvider"); } return ctx; } export function ToastProvider({ children }: { children: React.ReactNode }) { const [toasts, setToasts] = React.useState([]); const addToast = React.useCallback((toast: Omit) => { const id = Math.random().toString(36).slice(2, 9); setToasts((prev) => [...prev, { ...toast, id }]); const duration = toast.duration ?? 4000; if (duration > 0) { setTimeout( () => setToasts((prev) => prev.filter((t) => t.id !== id)), duration ); } }, []); const removeToast = React.useCallback((id: string) => { setToasts((prev) => prev.filter((t) => t.id !== id)); }, []); return ( {children} ); } const variantStyles: Record = { error: "border-red-500/30", info: "border-primary/30", success: "border-emerald-500/30", warning: "border-amber-500/30", }; const variantDots: Record = { error: "bg-red-400", info: "bg-primary", success: "bg-emerald-400", warning: "bg-amber-400", }; function ToastContainer({ toasts, onRemove, }: { toasts: ToastItem[]; onRemove: (id: string) => void; }) { if (toasts.length === 0) { return null; } return (

{toasts.map((toast) => (

{/* Scanline */}

{toast.title} {toast.description ? ( {toast.description} ) : null}

{/* Corner ticks */}

))}

); } /** Standalone toast display for previews (no provider needed) */ export function ToastDemo({ className }: { className?: string }) { const toasts: ToastItem[] = [ { description: "Grid firmware v2.7.1 installed.", id: "1", title: "System Updated", variant: "success", }, { description: "Sector 7G response time elevated.", id: "2", title: "Warning", variant: "warning", }, { description: "Relay node 12A unreachable.", id: "3", title: "Connection Lost", variant: "error", }, ]; return (

{toasts.map((toast) => (

{toast.title} {toast.description ? ( {toast.description} ) : null}

))}

); }