{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "activity-2",
  "description": "An activity feed grouped by day with Today and Yesterday headers, each listing avatar rows with the actor, action, target, and time. For audit trails and team activity pages.",
  "dependencies": [
    "@remixicon/react",
    "@base-ui/react"
  ],
  "registryDependencies": [
    "avatar",
    "marker"
  ],
  "files": [
    {
      "path": "registry/blocks/activity/2/activity-block.tsx",
      "content": "import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Marker, MarkerContent } from \"@/components/ui/marker\"\n\ntype Event = {\n  id: string\n  actor: string\n  initials: string\n  avatar: string\n  action: string\n  target: string\n  time: string\n}\n\nconst groups: { label: string; events: Event[] }[] = [\n  {\n    label: \"Today\",\n    events: [\n      {\n        id: \"merge-main\",\n        actor: \"Mara Ellis\",\n        initials: \"ME\",\n        avatar: \"https://i.pravatar.cc/80?img=47\",\n        action: \"merged a pull request into\",\n        target: \"main\",\n        time: \"12 Min Ago\",\n      },\n      {\n        id: \"deploy-v241\",\n        actor: \"Leo Tanaka\",\n        initials: \"LT\",\n        avatar: \"https://i.pravatar.cc/80?img=12\",\n        action: \"deployed\",\n        target: \"v2.4.1\",\n        time: \"1 Hour Ago\",\n      },\n      {\n        id: \"comment-roadmap\",\n        actor: \"Priya Nair\",\n        initials: \"PN\",\n        avatar: \"https://i.pravatar.cc/80?img=32\",\n        action: \"commented on\",\n        target: \"Q3 Roadmap\",\n        time: \"3 Hours Ago\",\n      },\n    ],\n  },\n  {\n    label: \"Yesterday\",\n    events: [\n      {\n        id: \"invite-members\",\n        actor: \"Owen Brooks\",\n        initials: \"OB\",\n        avatar: \"https://i.pravatar.cc/80?img=53\",\n        action: \"invited\",\n        target: \"two new members\",\n        time: \"Jun 24\",\n      },\n      {\n        id: \"close-482\",\n        actor: \"Sasha Kim\",\n        initials: \"SK\",\n        avatar: \"https://i.pravatar.cc/80?img=48\",\n        action: \"closed issue\",\n        target: \"#482\",\n        time: \"Jun 24\",\n      },\n    ],\n  },\n]\n\nexport default function ActivityBlock() {\n  return (\n    <section className=\"flex w-full items-center justify-center bg-background px-6 py-16 text-foreground\">\n      <div className=\"w-full max-w-md\">\n        <h2 className=\"mb-6 text-xl font-bold tracking-tight\">Activity</h2>\n\n        <div className=\"flex flex-col gap-6\">\n          {groups.map((group) => (\n            <div key={group.label} className=\"flex flex-col gap-3\">\n              <Marker variant=\"separator\">\n                <MarkerContent>{group.label}</MarkerContent>\n              </Marker>\n              <ul className=\"flex flex-col gap-4\">\n                {group.events.map((event) => (\n                  <li key={event.id} className=\"flex items-center gap-3\">\n                    <Avatar className=\"size-8 border border-border\">\n                      <AvatarImage\n                        src={event.avatar}\n                        alt={event.actor}\n                        className=\"grayscale\"\n                      />\n                      <AvatarFallback className=\"text-xs\">\n                        {event.initials}\n                      </AvatarFallback>\n                    </Avatar>\n                    <p className=\"flex-1 text-sm text-muted-foreground\">\n                      <span className=\"font-medium text-foreground\">\n                        {event.actor}\n                      </span>{\" \"}\n                      {event.action}{\" \"}\n                      <span className=\"font-medium text-foreground\">\n                        {event.target}\n                      </span>\n                    </p>\n                    <span className=\"shrink-0 text-xs text-muted-foreground tabular-nums\">\n                      {event.time}\n                    </span>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "height": "52vh",
    "tier": "free"
  },
  "categories": [
    "activity"
  ],
  "type": "registry:block"
}