"use client"; import { useRef, useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { Info, CheckCircle2, TriangleAlert, XCircle, ArrowRight, X, type LucideIcon, } from "lucide-react"; import { cn } from "@/lib/utils"; export type BannerVariant = "info" | "success" | "warning" | "error"; interface VariantStyle { icon: LucideIcon; label: string; accent: string; glow: string; } const VARIANT_STYLE: Record = { info: { icon: Info, label: "Update", accent: "#8b7dff", glow: "rgba(124, 108, 255, 0.30)", }, success: { icon: CheckCircle2, label: "Success", accent: "#34d399", glow: "rgba(52, 211, 153, 0.28)", }, warning: { icon: TriangleAlert, label: "Warning", accent: "#fbbf24", glow: "rgba(251, 191, 36, 0.26)", }, error: { icon: XCircle, label: "Error", accent: "#fb7185", glow: "rgba(251, 113, 133, 0.28)", }, }; export interface BannerAlertProps { variant?: BannerVariant; title: string; message: string; actionLabel?: string; onAction?: () => void; onDismiss?: () => void; /** When set, renders a bottom progress bar that fires onDismiss when it fills. */ autoDismissMs?: number; className?: string; } export function BannerAlert({ variant = "info", title, message, actionLabel, onAction, onDismiss, autoDismissMs, className, }: BannerAlertProps) { const style = VARIANT_STYLE[variant]; const Icon = style.icon; // Guard so the progress bar completing and the X click can never both advance. const dismissedRef = useRef(false); const dismiss = () => { if (dismissedRef.current) return; dismissedRef.current = true; onDismiss?.(); }; return (

{/* variant glow */}

{/* top hairline highlight */}

{/* left accent edge */}

{title} {style.label}

{message}

{actionLabel ? ( ) : null}

{typeof autoDismissMs === "number" ? (

) : null}

); } interface DemoBanner { variant: BannerVariant; title: string; message: string; actionLabel: string; } const DEMO_BANNERS: DemoBanner[] = [ { variant: "info", title: "Realtime is now live", message: "Collaborative editing ships to every workspace today. Invite your team and build together in the same canvas.", actionLabel: "See what changed", }, { variant: "success", title: "Deployment succeeded", message: "lumenite-web reached production in 41 seconds. All 218 checks passed with zero regressions.", actionLabel: "View deployment", }, { variant: "warning", title: "Usage approaching limit", message: "You have used 82 percent of this month's render minutes. Upgrade before renewal to avoid throttling.", actionLabel: "Manage plan", }, { variant: "error", title: "Payment failed", message: "We could not charge the card ending in 4242. Update your billing details to keep services running.", actionLabel: "Update billing", }, ]; const CYCLE_MS = 4600; export default function Demo() { const [index, setIndex] = useState(0); const banner = DEMO_BANNERS[index]; const advance = () => setIndex((i) => (i + 1) % DEMO_BANNERS.length); return (

Notifications

{String(index + 1).padStart(2, "0")} / {String(DEMO_BANNERS.length).padStart(2, "0")}

{DEMO_BANNERS.map((b, i) => { const active = i === index; return (

); }

Banner Alert