{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "popover2",
  "title": "Popover",
  "description": "Displays rich content in a portal, triggered by a button. Each popover example works with positioning primitives from Radix UI and Base UI.",
  "files": [
    {
      "path": "contents/components/popover/2/index.tsx",
      "content": "\"use client\";\n\nimport { BellIcon } from \"lucide-react\";\nimport { useState } from \"react\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\n\nconst initialNotifications = [\n  {\n    action: \"requested review on\",\n    id: 1,\n    target: \"PR #42: Feature implementation\",\n    timestamp: \"15 minutes ago\",\n    unread: true,\n    user: \"Chris Tompson\"\n  },\n  {\n    action: \"shared\",\n    id: 2,\n    target: \"New component library\",\n    timestamp: \"45 minutes ago\",\n    unread: true,\n    user: \"Emma Davis\"\n  },\n  {\n    action: \"assigned you to\",\n    id: 3,\n    target: \"API integration task\",\n    timestamp: \"4 hours ago\",\n    unread: false,\n    user: \"James Wilson\"\n  },\n  {\n    action: \"replied to your comment in\",\n    id: 4,\n    target: \"Authentication flow\",\n    timestamp: \"12 hours ago\",\n    unread: false,\n    user: \"Alex Morgan\"\n  },\n  {\n    action: \"commented on\",\n    id: 5,\n    target: \"Dashboard redesign\",\n    timestamp: \"2 days ago\",\n    unread: false,\n    user: \"Sarah Chen\"\n  },\n  {\n    action: \"mentioned you in\",\n    id: 6,\n    target: \"shadcnuikit.com open graph image\",\n    timestamp: \"2 weeks ago\",\n    unread: false,\n    user: \"Miky Derya\"\n  }\n];\n\nfunction Dot({ className }: { className?: string }) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className={className}\n      fill=\"currentColor\"\n      height=\"6\"\n      viewBox=\"0 0 6 6\"\n      width=\"6\">\n      <circle cx=\"3\" cy=\"3\" r=\"3\" />\n    </svg>\n  );\n}\n\nexport default function PopoverComponent() {\n  const [notifications, setNotifications] = useState(initialNotifications);\n  const unreadCount = notifications.filter((n) => n.unread).length;\n\n  const handleMarkAllAsRead = () => {\n    setNotifications(\n      notifications.map((notification) => ({\n        ...notification,\n        unread: false\n      }))\n    );\n  };\n\n  const handleNotificationClick = (id: number) => {\n    setNotifications(\n      notifications.map((notification) =>\n        notification.id === id ? { ...notification, unread: false } : notification\n      )\n    );\n  };\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button aria-label=\"Open notifications\" className=\"relative\" size=\"icon\" variant=\"outline\">\n          <BellIcon aria-hidden=\"true\" size={16} />\n          {unreadCount > 0 && (\n            <Badge className=\"absolute -top-2 left-full min-w-5 -translate-x-1/2 px-1\">\n              {unreadCount > 99 ? \"99+\" : unreadCount}\n            </Badge>\n          )}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-80 p-1\">\n        <div className=\"flex items-baseline justify-between gap-4 px-3 py-2\">\n          <div className=\"text-sm font-semibold\">Notifications</div>\n          {unreadCount > 0 && (\n            <button\n              className=\"text-xs font-medium hover:underline\"\n              onClick={handleMarkAllAsRead}\n              type=\"button\">\n              Mark all as read\n            </button>\n          )}\n        </div>\n        <div\n          aria-orientation=\"horizontal\"\n          className=\"bg-border -mx-1 my-1 h-px\"\n          role=\"separator\"\n          tabIndex={-1}\n        />\n        {notifications.map((notification) => (\n          <div\n            className=\"hover:bg-accent rounded-md px-3 py-2 text-sm transition-colors\"\n            key={notification.id}>\n            <div className=\"relative flex items-start pe-3\">\n              <div className=\"flex-1 space-y-1\">\n                <button\n                  className=\"text-foreground/80 text-left after:absolute after:inset-0\"\n                  onClick={() => handleNotificationClick(notification.id)}\n                  type=\"button\">\n                  <span className=\"text-foreground font-medium hover:underline\">\n                    {notification.user}\n                  </span>{\" \"}\n                  {notification.action}{\" \"}\n                  <span className=\"text-foreground font-medium hover:underline\">\n                    {notification.target}\n                  </span>\n                  .\n                </button>\n                <div className=\"text-muted-foreground text-xs\">{notification.timestamp}</div>\n              </div>\n              {notification.unread && (\n                <div className=\"absolute end-0 self-center\">\n                  <span className=\"sr-only\">Unread</span>\n                  <Dot />\n                </div>\n              )}\n            </div>\n          </div>\n        ))}\n      </PopoverContent>\n    </Popover>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/popover2.tsx"
    }
  ],
  "type": "registry:component"
}