{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"notifications-dropdown","type":"registry:component","title":"Notifications Dropdown","description":"Bell icon with unread badge and notification list dropdown.","version":"0.1.0","status":"alpha","registryDependencies":["badge","button","dropdown-menu"],"files":[{"path":"src/components/blocks/notifications-dropdown.tsx","type":"registry:component","content":"'use client'\n\nimport { Bell } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu'\nimport { cn } from '@/lib/utils'\n\n// Replace with your real notification data source\nconst notifications = [\n  {\n    id: '1',\n    title: 'New asset uploaded',\n    description: 'logo-dark.svg was added to Brand Assets',\n    time: '2 min ago',\n    unread: true,\n  },\n  {\n    id: '2',\n    title: 'Export ready',\n    description: 'Your brand guidelines PDF is ready to download.',\n    time: '1 hr ago',\n    unread: true,\n  },\n  {\n    id: '3',\n    title: 'Theme updated',\n    description: 'Primary colour changed to #6862e4.',\n    time: 'Yesterday',\n    unread: false,\n  },\n]\n\nexport function NotificationsDropdown() {\n  const unreadCount = notifications.filter((n) => n.unread).length\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"ghost\" size=\"icon\" className=\"relative\" aria-label=\"Notifications\">\n          <Bell className=\"h-4 w-4\" />\n          {unreadCount > 0 && (\n            <Badge className=\"absolute -right-0.5 -top-0.5 flex h-4 w-4 items-center justify-center rounded-full p-0 text-[10px]\">\n              {unreadCount}\n            </Badge>\n          )}\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" className=\"w-80\">\n        <DropdownMenuLabel className=\"flex items-center justify-between\">\n          Notifications\n          <Button variant=\"ghost\" size=\"sm\" className=\"h-auto px-2 py-0.5 text-xs font-normal\">\n            Mark all read\n          </Button>\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        {notifications.map((n) => (\n          <DropdownMenuItem key={n.id} className=\"flex items-start gap-3 py-3\">\n            <span\n              className={cn(\n                'mt-1.5 h-2 w-2 shrink-0 rounded-full',\n                n.unread ? 'bg-primary' : 'bg-transparent',\n              )}\n            />\n            <div className=\"flex-1 space-y-0.5\">\n              <p className=\"text-sm font-medium leading-none\">{n.title}</p>\n              <p className=\"text-xs text-muted-foreground\">{n.description}</p>\n              <p className=\"text-xs text-muted-foreground\">{n.time}</p>\n            </div>\n          </DropdownMenuItem>\n        ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n"}]}