{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"notification-stack","type":"registry:component","title":"Notification Stack","description":"Pilha de notificações que cicla: a do topo sai, uma nova entra por baixo.","author":"UI Catalog <https://ui.codehall.io>","dependencies":["motion"],"registryDependencies":[],"files":[{"path":"components/illustrations/notification-stack.tsx","type":"registry:component","content":"'use client'\n\nimport { useEffect, useState } from 'react'\nimport { AnimatePresence, motion } from 'motion/react'\nimport { Bell, CreditCard, MessageSquare, UserPlus } from 'lucide-react'\n\n// \"Notification Stack\": cards empilhados; a cada 2,4s o do topo sai e um novo entra por baixo.\nconst ITEMS = [\n  { Icon: UserPlus, title: 'Novo lead', text: 'Ana Souza entrou pelo formulário', time: 'agora' },\n  { Icon: CreditCard, title: 'Pagamento aprovado', text: 'R$ 497,00 · Plano Pro', time: '1 min' },\n  { Icon: MessageSquare, title: 'Mensagem no WhatsApp', text: '“Consigo migrar meus dados?”', time: '3 min' },\n  { Icon: Bell, title: 'Automação disparada', text: 'Boas-vindas · 128 contatos', time: '5 min' },\n]\n\nexport default function NotificationStack() {\n  const [head, setHead] = useState(0)\n  useEffect(() => {\n    const t = setInterval(() => setHead((h) => (h + 1) % ITEMS.length), 2400)\n    return () => clearInterval(t)\n  }, [])\n  const visible = [0, 1, 2].map((i) => ITEMS[(head + i) % ITEMS.length]!)\n\n  return (\n    <div className=\"relative h-[200px] w-[340px] text-foreground\">\n      <AnimatePresence initial={false}>\n        {visible.map((it, depth) => (\n          <motion.div\n            key={`${it.title}-${(head + depth) % ITEMS.length}`}\n            layout\n            initial={{ opacity: 0, y: 40, scale: 0.9 }}\n            animate={{ opacity: 1 - depth * 0.25, y: depth * -14, scale: 1 - depth * 0.05, zIndex: 10 - depth }}\n            exit={{ opacity: 0, y: -40, scale: 1.02 }}\n            transition={{ type: 'spring', stiffness: 260, damping: 26 }}\n            className=\"absolute inset-x-0 bottom-0 flex items-start gap-3 rounded-xl border bg-card p-3 shadow-md\"\n          >\n            <span className=\"flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted\">\n              <it.Icon className=\"size-4\" />\n            </span>\n            <div className=\"min-w-0 flex-1\">\n              <div className=\"flex items-center justify-between gap-2\">\n                <span className=\"truncate text-sm font-medium\">{it.title}</span>\n                <span className=\"text-[11px] text-muted-foreground\">{it.time}</span>\n              </div>\n              <p className=\"truncate text-xs text-muted-foreground\">{it.text}</p>\n            </div>\n          </motion.div>\n        ))}\n      </AnimatePresence>\n    </div>\n  )\n}\n"}]}