"use client"; import { useEffect, useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import type { Variants } from "framer-motion"; import { Bell, GitMerge, AtSign, CreditCard, TriangleAlert, Check, Settings2, } from "lucide-react"; import type { LucideIcon } from "lucide-react"; import { cn } from "@/lib/utils"; export type NotificationTone = "brand" | "glow" | "positive" | "warn"; export interface NotificationItem { id: string; icon: LucideIcon; title: string; detail: string; time: string; tone: NotificationTone; } const TONE: Record = { brand: { box: "border-[#7c6cff]/25 bg-[#7c6cff]/12", icon: "text-[#a99dff]", dot: "bg-[#7c6cff] shadow-[0_0_8px_rgba(124,108,255,0.85)]", }, glow: { box: "border-[#5b8cff]/25 bg-[#5b8cff]/12", icon: "text-[#8fb2ff]", dot: "bg-[#5b8cff] shadow-[0_0_8px_rgba(91,140,255,0.85)]", }, positive: { box: "border-emerald-400/25 bg-emerald-400/10", icon: "text-emerald-300", dot: "bg-emerald-400 shadow-[0_0_8px_rgba(52,211,153,0.7)]", }, warn: { box: "border-amber-400/25 bg-amber-400/10", icon: "text-amber-300", dot: "bg-amber-400 shadow-[0_0_8px_rgba(251,191,36,0.7)]", }, }; const EASE: [number, number, number, number] = [0.16, 1, 0.3, 1]; const listVariants: Variants = { hidden: {}, visible: { transition: { staggerChildren: 0.07, delayChildren: 0.14 } }, }; const itemVariants: Variants = { hidden: { opacity: 0, x: 16, filter: "blur(6px)" }, visible: { opacity: 1, x: 0, filter: "blur(0px)", transition: { duration: 0.5, ease: EASE }, }, }; export function NotificationCenter({ items, auto = true, className, }: { items: NotificationItem[]; auto?: boolean; className?: string; }) { const [open, setOpen] = useState(false); const [read, setRead] = useState(false); const [interacted, setInteracted] = useState(false); const unread = read ? 0 : items.length; const shouldRing = unread > 0 && !open; // Self-driving demo loop: ring, open, read, close, repeat. Pauses on interaction. useEffect(() => { if (!auto || interacted) return; let cancelled = false; const timers: ReturnType[] = []; const cycle = () => { if (cancelled) return; setOpen(false); setRead(false); timers.push(setTimeout(() => !cancelled && setOpen(true), 1300)); timers.push(setTimeout(() => !cancelled && setRead(true), 3900)); timers.push(setTimeout(() => !cancelled && setOpen(false), 5600)); timers.push(setTimeout(cycle, 7000)); }; cycle(); return () => { cancelled = true; timers.forEach(clearTimeout); }; }, [auto, interacted]); function toggle() { setInteracted(true); setOpen((o) => !o); } function markAllRead() { setInteracted(true); setRead(true); } return (

{open && (

{/* thin bright top edge */}

{/* faint interior glow */}

{/* header */}

Notifications {unread > 0 && ( {unread} new )}

{/* list */} {items.map((n) => { const t = TONE[n.tone]; const Icon = n.icon; return (

{n.title}

{n.time}

{n.detail}

{!read && ( )} ); })} {/* footer */}

)}

); } const DEMO_ITEMS: NotificationItem[] = [ { id: "deploy", icon: GitMerge, title: "Deployment successful", detail: "web-app is live on production", time: "2m", tone: "glow", }, { id: "mention", icon: AtSign, title: "Priya mentioned you", detail: "Design review · #product", time: "9m", tone: "brand", }, { id: "payment", icon: CreditCard, title: "Payment received", detail: "Northwind Labs · $4,200", time: "24m", tone: "positive", }, { id: "usage", icon: TriangleAlert, title: "API usage at 82%", detail: "Resets in 6 days", time: "1h", tone: "warn", }, ]; export default function Demo() { return (

{/* frosted-glass backdrop context */}

Console

Workspace activity

); }

Notification Center