{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dropdown-16",
  "title": "Notifications",
  "description": "Bell trigger with an unread badge and an activity list.",
  "dependencies": [],
  "registryDependencies": [
    "dropdown-menu",
    "button",
    "badge"
  ],
  "files": [
    {
      "path": "registry/patterns/dropdown/dropdown-16.tsx",
      "content": "import { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu'\nimport {\n  BellIcon,\n  GitPullRequestIcon,\n  MessageSquareIcon,\n  UserPlusIcon,\n} from 'lucide-react'\n\nconst notifications = [\n  {\n    icon: MessageSquareIcon,\n    title: 'Ava commented on your PR',\n    time: '2m ago',\n    unread: true,\n  },\n  {\n    icon: GitPullRequestIcon,\n    title: 'Ben requested a review',\n    time: '1h ago',\n    unread: true,\n  },\n  {\n    icon: UserPlusIcon,\n    title: 'Cara joined the team',\n    time: 'Yesterday',\n    unread: false,\n  },\n]\n\nexport function Dropdown16() {\n  const unread = notifications.filter((item) => item.unread).length\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger\n        render={\n          <Button\n            variant=\"outline\"\n            size=\"icon-sm\"\n            className=\"relative\"\n            aria-label=\"Notifications\"\n          >\n            <BellIcon />\n            {unread > 0 && (\n              <span className=\"bg-primary text-primary-foreground absolute -top-1 -right-1 flex size-4 items-center justify-center rounded-full text-[10px] font-medium\">\n                {unread}\n              </span>\n            )}\n          </Button>\n        }\n      />\n      <DropdownMenuContent align=\"center\" className=\"w-72\">\n        <DropdownMenuGroup>\n          <DropdownMenuLabel className=\"text-foreground flex items-center justify-between\">\n            Notifications\n            <Badge variant=\"secondary\" className=\"rounded-sm px-1.5\">\n              {unread} new\n            </Badge>\n          </DropdownMenuLabel>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        {notifications.map((item) => (\n          <DropdownMenuItem\n            key={item.title}\n            className=\"items-start gap-2.5 py-2\"\n          >\n            <item.icon className=\"text-muted-foreground mt-0.5\" />\n            <div className=\"flex flex-1 flex-col gap-0.5\">\n              <span className=\"text-sm leading-snug\">{item.title}</span>\n              <span className=\"text-muted-foreground text-xs\">{item.time}</span>\n            </div>\n            {item.unread && (\n              <span className=\"bg-primary mt-1.5 size-2 rounded-full\" />\n            )}\n          </DropdownMenuItem>\n        ))}\n        <DropdownMenuSeparator />\n        <DropdownMenuItem className=\"justify-center text-sm\">\n          View all\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/patterns/dropdown/dropdown-16.tsx"
    }
  ],
  "type": "registry:block"
}