{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tooltip-05",
  "title": "Hover card with an icon",
  "description": "A link that previews a short notice led by an icon.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.ndekocode.dev/r/hover-card.json",
    "https://ui.ndekocode.dev/r/icons.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-05.tsx",
      "content": "import { GlobeIcon } from '@/registry/ndeko/lib/icons';\nimport { FOCUS_RING } from '@/registry/ndeko/lib/recipes';\nimport { cn } from '@/registry/ndeko/lib/utils';\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from '@/registry/ndeko/ui/hover-card';\n\nconst LINK = cn(\n  'text-primary-ink rounded-sm font-medium underline-offset-4 hover:underline',\n  FOCUS_RING\n);\n\nexport default function Tooltip05() {\n  return (\n    <p className='text-muted-foreground text-[13px]'>\n      Workspace data is stored in{' '}\n      <HoverCard>\n        <HoverCardTrigger href='#' className={LINK}>\n          Frankfurt\n        </HoverCardTrigger>\n        <HoverCardContent className='flex w-72 gap-3 p-3'>\n          <GlobeIcon className='text-muted-foreground mt-0.5 size-4 shrink-0' />\n          <div className='flex flex-col gap-1'>\n            <p className='font-medium'>Data stays in the EU</p>\n            <p className='text-muted-foreground text-xs'>\n              Files, backups and logs are kept in Frankfurt and never copied\n              outside the European Union.\n            </p>\n          </div>\n        </HoverCardContent>\n      </HoverCard>\n      .\n    </p>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "components",
    "tooltip"
  ],
  "type": "registry:component"
}