{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tooltip-11",
  "title": "Person hover card",
  "description": "A name that previews the bio and mutual friends.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.ndekocode.dev/r/avatar.json",
    "https://ui.ndekocode.dev/r/hover-card.json",
    "https://ui.ndekocode.dev/r/recipes.json",
    "https://ui.ndekocode.dev/r/theme.json",
    "https://ui.ndekocode.dev/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/ndeko/components/tooltip/tooltip-11.tsx",
      "content": "import { FOCUS_RING } from '@/registry/ndeko/lib/recipes';\nimport { cn } from '@/registry/ndeko/lib/utils';\nimport { Avatar } from '@/registry/ndeko/ui/avatar';\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from '@/registry/ndeko/ui/hover-card';\n\nconst MUTUAL_FRIENDS = [\n  { name: 'Ada Brooks' },\n  { name: 'Leo Martin' },\n  { name: 'Zoe Hart' },\n];\n\nfunction mutualFriendsLabelOf(count: number) {\n  if (count === 1) {\n    return '1 mutual friend';\n  }\n  return `${count} mutual friends`;\n}\n\nexport default function Tooltip11() {\n  return (\n    <div className='flex items-center gap-3'>\n      <Avatar className='size-10' aria-hidden='true' seed='Keith Kennedy' />\n      <div className='flex flex-col gap-0.5'>\n        <HoverCard>\n          <HoverCardTrigger\n            href='#'\n            className={cn(\n              'rounded-sm text-sm font-medium underline-offset-4 hover:underline',\n              FOCUS_RING\n            )}\n          >\n            Keith Kennedy\n          </HoverCardTrigger>\n          <HoverCardContent className='flex flex-col gap-3'>\n            <div className='flex items-center gap-3'>\n              <Avatar\n                className='size-10'\n                aria-hidden='true'\n                seed='Keith Kennedy'\n              />\n              <div className='flex flex-col gap-0.5'>\n                <p className='text-sm font-medium'>Keith Kennedy</p>\n                <p className='text-muted-foreground text-xs'>@k.kennedy</p>\n              </div>\n            </div>\n            <p className='text-muted-foreground'>\n              Designer at{' '}\n              <strong className='text-foreground font-medium'>\n                Lumen Studio\n              </strong>\n              . Draws interfaces for teams who ship every week.\n            </p>\n            <div className='flex items-center gap-2'>\n              <div className='flex -space-x-1.5' aria-hidden='true'>\n                {MUTUAL_FRIENDS.map((friend) => (\n                  <Avatar\n                    key={friend.name}\n                    className='ring-popover size-5 ring-2'\n                    seed={friend.name}\n                  />\n                ))}\n              </div>\n              <span className='text-muted-foreground text-xs'>\n                {mutualFriendsLabelOf(MUTUAL_FRIENDS.length)}\n              </span>\n            </div>\n          </HoverCardContent>\n        </HoverCard>\n        <span className='text-muted-foreground text-xs'>@k.kennedy</span>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "components",
    "tooltip"
  ],
  "type": "registry:component"
}