{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"timeline-de-atividades","type":"registry:component","title":"Timeline de atividades","description":"Linha do tempo vertical com ícone por tipo de evento e avatar.","author":"UI Catalog <https://ui.codehall.io>","dependencies":[],"registryDependencies":["avatar"],"files":[{"path":"components/timeline-de-atividades.tsx","type":"registry:component","content":"'use client'\n\nimport { CheckCircle2, FileText, Mail, MessageSquare, Phone } from 'lucide-react'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\n\nconst EVENTS = [\n  { Icon: CheckCircle2, who: 'Ana Souza', what: 'moveu o negócio para Fechamento', when: 'há 12 min', tone: 'text-emerald-500' },\n  { Icon: Phone, who: 'Bruno Rocha', what: 'ligou para Lumi Tecnologia (8 min)', when: 'há 1 h', tone: 'text-foreground' },\n  { Icon: MessageSquare, who: 'IA', what: 'resumiu a conversa: cliente quer integração com ERP', when: 'há 2 h', tone: 'text-sky-500' },\n  { Icon: FileText, who: 'Carla Mendes', what: 'enviou a proposta v2 (R$ 24.000)', when: 'ontem', tone: 'text-foreground' },\n  { Icon: Mail, who: 'Sistema', what: 'e-mail de boas-vindas aberto 3×', when: 'ontem', tone: 'text-muted-foreground' },\n]\n\nexport default function TimelineAtividades() {\n  return (\n    <ol className=\"relative w-full max-w-md space-y-6 border-l pl-6\">\n      {EVENTS.map((e, i) => (\n        <li key={i} className=\"relative\">\n          <span className={`absolute -left-[31px] flex size-5 items-center justify-center rounded-full border bg-background ${e.tone}`}>\n            <e.Icon className=\"size-3\" />\n          </span>\n          <div className=\"flex items-start gap-3\">\n            <Avatar size=\"sm\">\n              <AvatarFallback>{e.who.split(' ').map((s) => s[0]).join('').slice(0, 2)}</AvatarFallback>\n            </Avatar>\n            <div className=\"min-w-0 text-sm\">\n              <p>\n                <span className=\"font-medium\">{e.who}</span> <span className=\"text-muted-foreground\">{e.what}</span>\n              </p>\n              <p className=\"text-xs text-muted-foreground\">{e.when}</p>\n            </div>\n          </div>\n        </li>\n      ))}\n    </ol>\n  )\n}\n"}]}