{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "activity-feed",
  "type": "registry:ui",
  "title": "Activity feed",
  "description": "React activity feed that lists who did what and when, with initials avatars, muted action text and tabular timestamps in a single bordered card.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/avatar.json",
    "https://ui.minidev.pro/r/list-item.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/activity-feed.tsx",
      "type": "registry:ui",
      "target": "components/ui/activity-feed.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback } from \"@/components/ui/avatar\"\nimport { ListItem } from \"@/components/ui/list-item\"\n\ntype ActivityItem = { id: string; user: string; action: string; time: string }\n\ntype ActivityFeedProps = {\n  items?: ActivityItem[]\n  className?: string\n}\n\nconst SAMPLE_ITEMS: ActivityItem[] = [\n  { id: \"a1\", user: \"Maya Chen\", action: \"paid invoice INV-2041\", time: \"2m ago\" },\n  { id: \"a2\", user: \"Theo Okafor\", action: \"deployed lumen-web to production\", time: \"18m ago\" },\n  { id: \"a3\", user: \"Priya Raman\", action: \"added Northwind as a customer\", time: \"1h ago\" },\n  { id: \"a4\", user: \"Sam Lowe\", action: \"commented on INV-2038\", time: \"3h ago\" },\n  { id: \"a5\", user: \"Ada Novak\", action: \"changed the billing plan to Scale\", time: \"Yesterday\" },\n]\n\n/** A compact feed of who did what, with avatars and timestamps, for dashboards and detail panes. */\nfunction ActivityFeed({ items = SAMPLE_ITEMS, className }: ActivityFeedProps) {\n  return (\n    <div data-slot=\"activity-feed\" className={cn(\"w-full max-w-md rounded-xl border border-border bg-surface\", className)}>\n      {items.map((item) => (\n        <ListItem\n          key={item.id}\n          leading={<Avatar className=\"size-8\"><AvatarFallback>{item.user.slice(0,2).toUpperCase()}</AvatarFallback></Avatar>}\n          heading={<><span className=\"font-medium\">{item.user}</span> <span className=\"font-normal text-fg-muted\">{item.action}</span></>}\n          trailing={<span className=\"text-xs tabular-nums text-fg-muted\">{item.time}</span>}\n        />\n      ))}\n    </div>\n  )\n}\nexport { ActivityFeed }\nexport type { ActivityFeedProps, ActivityItem }\n"
    }
  ]
}