{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "popover-10",
  "title": "Notifications list",
  "description": "Notification rows with an icon, message text, timestamp, and unread indicator dot.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "popover",
    "button",
    "badge",
    "item",
    "separator"
  ],
  "files": [
    {
      "path": "registry/patterns/popover/popover-10.tsx",
      "content": "import {\n  BellIcon,\n  GitMergeIcon,\n  MessageSquareIcon,\n  UserPlusIcon,\n} from 'lucide-react'\n\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/components/ui/popover'\nimport { Separator } from '@/components/ui/separator'\n\nconst notifications = [\n  {\n    icon: MessageSquareIcon,\n    title: 'Maya left a comment',\n    time: '2m',\n    unread: true,\n  },\n  {\n    icon: GitMergeIcon,\n    title: 'PR #482 merged',\n    time: '1h',\n    unread: true,\n  },\n  {\n    icon: UserPlusIcon,\n    title: 'Alex joined the team',\n    time: '1d',\n    unread: false,\n  },\n] as const\n\nexport function Popover10() {\n  return (\n    <Popover>\n      <PopoverTrigger\n        render={\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            className=\"relative\"\n            aria-label=\"Notifications\"\n          >\n            <BellIcon />\n            <Badge\n              variant=\"destructive\"\n              className=\"pointer-events-none absolute -top-1 -right-1 size-4 rounded-full p-0 text-[10px]\"\n            >\n              2\n            </Badge>\n          </Button>\n        }\n      />\n      <PopoverContent className=\"w-72 gap-0 p-0\">\n        <div className=\"flex items-center justify-between px-3 py-2\">\n          <p className=\"text-sm font-medium\">Notifications</p>\n          <Button variant=\"ghost\" size=\"sm\" className=\"h-6 px-2 text-xs\">\n            Mark all read\n          </Button>\n        </div>\n        <Separator />\n        <ul className=\"flex flex-col py-1\">\n          {notifications.map((n, i) => (\n            <li\n              key={i}\n              className=\"hover:bg-muted/60 flex items-center gap-3 px-3 py-2 transition-colors\"\n            >\n              <span className=\"bg-muted text-muted-foreground flex size-7 shrink-0 items-center justify-center rounded-full\">\n                <n.icon className=\"size-3.5\" />\n              </span>\n              <span className=\"flex-1 truncate text-sm\">{n.title}</span>\n              <span className=\"text-muted-foreground text-xs\">{n.time}</span>\n              {n.unread && (\n                <span className=\"bg-primary size-1.5 shrink-0 rounded-full\" />\n              )}\n            </li>\n          ))}\n        </ul>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/patterns/popover/popover-10.tsx"
    }
  ],
  "type": "registry:block"
}