{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "p-popover-3",
  "description": "Animated popovers",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@coss/avatar",
    "@coss/button",
    "@coss/popover"
  ],
  "files": [
    {
      "path": "registry/default/particles/p-popover-3.tsx",
      "content": "\"use client\";\n\nimport { BellIcon, UserIcon } from \"lucide-react\";\nimport type { ComponentType } from \"react\";\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Popover,\n  PopoverCreateHandle,\n  PopoverDescription,\n  PopoverPopup,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nconst popoverHandle = PopoverCreateHandle<ComponentType>();\n\nconst NotificationsContent = () => {\n  return (\n    <>\n      <PopoverTitle className=\"text-base\">Notifications</PopoverTitle>\n      <PopoverDescription>\n        You have no new notifications at this time.\n      </PopoverDescription>\n    </>\n  );\n};\n\nconst ProfileContent = () => {\n  return (\n    <div className=\"w-48\">\n      <div className=\"flex items-center gap-3\">\n        <Avatar>\n          <AvatarImage\n            alt=\"Mark Andersson\"\n            src=\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80\"\n          />\n          <AvatarFallback>MA</AvatarFallback>\n        </Avatar>\n        <div className=\"min-w-0 flex-1\">\n          <h4 className=\"line-clamp-1 font-medium text-sm\">Mark Andersson</h4>\n          <div className=\"flex items-center gap-3 text-muted-foreground text-xs\">\n            Product Designer\n          </div>\n        </div>\n      </div>\n      <Button className=\"mt-3 w-full\" size=\"sm\" variant=\"outline\">\n        Log out\n      </Button>\n    </div>\n  );\n};\n\nexport default function Particle() {\n  return (\n    <div className=\"flex gap-2\">\n      <PopoverTrigger\n        handle={popoverHandle}\n        payload={NotificationsContent}\n        render={\n          <Button aria-label=\"Notifications\" size=\"icon\" variant=\"outline\" />\n        }\n      >\n        <BellIcon aria-hidden=\"true\" />\n      </PopoverTrigger>\n      <PopoverTrigger\n        handle={popoverHandle}\n        payload={ProfileContent}\n        render={<Button aria-label=\"Profile\" size=\"icon\" variant=\"outline\" />}\n      >\n        <UserIcon aria-hidden=\"true\" />\n      </PopoverTrigger>\n      <Popover handle={popoverHandle}>\n        {({ payload: Payload }) => (\n          <PopoverPopup className=\"min-w-none\">\n            {Payload !== undefined && <Payload />}\n          </PopoverPopup>\n        )}\n      </Popover>\n    </div>\n  );\n}\n",
      "type": "registry:block"
    }
  ],
  "categories": [
    "avatar",
    "button",
    "popover"
  ],
  "type": "registry:block"
}