{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatar-05",
  "title": "Avatar with Hover Card",
  "description": "An avatar with hover card component",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "avatar",
    "hover-card"
  ],
  "files": [
    {
      "path": "src/components/customized/avatar/avatar-05.tsx",
      "content": "import { CalendarIcon } from \"lucide-react\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/registry/ui/avatar\";\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/ui/hover-card\";\n\nexport default function AvatarHoverCardDemo() {\n  return (\n    <HoverCard>\n      <HoverCardTrigger className=\"cursor-pointer\">\n        <Avatar>\n          <AvatarImage alt=\"@shadcn\" src=\"https://github.com/shadcn.png\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </HoverCardTrigger>\n      <HoverCardContent className=\"w-full max-w-xs\">\n        <div className=\"flex justify-between space-x-4\">\n          <Avatar>\n            <AvatarImage alt=\"@shadcn\" src=\"https://github.com/shadcn.png\" />\n            <AvatarFallback>CN</AvatarFallback>\n          </Avatar>\n          <div className=\"space-y-1\">\n            <h4 className=\"font-semibold text-sm\">@shadcn</h4>\n            <p className=\"text-sm\">\n              The founder of Shadcn UI. I own a computer.\n            </p>\n            <div className=\"flex items-center pt-2\">\n              <CalendarIcon className=\"mr-2 h-4 w-4 opacity-70\" />{\" \"}\n              <span className=\"text-muted-foreground text-xs\">\n                Joined December 2021\n              </span>\n            </div>\n          </div>\n        </div>\n      </HoverCardContent>\n    </HoverCard>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}