{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "globe-demo",
  "title": "Globe Demo",
  "description": "Demo showing Globe component.",
  "registryDependencies": [
    "https://systaliko-ui.vercel.app/r/globe",
    "https://systaliko-ui.vercel.app/r/tooltip"
  ],
  "files": [
    {
      "path": "registry/demo/blocks/globe/index.tsx",
      "content": "import { Globe, GlobeSvg } from '@/components/systaliko-ui/blocks/globe';\nimport { Pulse } from '@/components/systaliko-ui/components/pulse';\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/components/systaliko-ui/shadcn/tooltip';\nimport { InfoIcon } from 'lucide-react';\n\nexport function GlobeDemo() {\n  return (\n    <TooltipProvider>\n      <div className=\"w-full h-screen flex items-center justify-center\">\n        <Globe>\n          <GlobeSvg>\n            <foreignObject x={200} y={180} width={20} height={20}>\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <div className=\"size-full flex justify-center items-center\">\n                      <Pulse />\n                    </div>\n                  }\n                />\n                <TooltipContent className=\"pb-2 flex-col\">\n                  <div className=\"flex justify-between items-center gap-2\">\n                    <p className=\"text-muted-foreground\">USA Kansas</p>\n                    <p className=\"font-medium tabular-nums\">$121,000</p>\n                  </div>\n                  <div className=\"flex gap-2 items-center justify-between\">\n                    <div className=\"flex gap-1 items-center\">\n                      <InfoIcon className=\"text-destructive\" size={16} />\n                      <p className=\"text-destructive/80 text-xs\">only 8 left</p>\n                    </div>\n                    <div className=\"\"></div>\n                  </div>\n                </TooltipContent>\n              </Tooltip>\n            </foreignObject>\n\n            <foreignObject x={600} y={80} width={40} height={40}>\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <div className=\"size-full flex justify-center items-center\">\n                      <Pulse />\n                    </div>\n                  }\n                />\n                <TooltipContent className=\"pb-2 flex-col\">\n                  <div className=\"flex justify-between items-center gap-2\">\n                    <p className=\"text-muted-foreground\">Europe France</p>\n                    <p className=\"font-medium tabular-nums\">$121,000</p>\n                  </div>\n                  <div className=\"flex gap-2 items-center justify-between\">\n                    <div className=\"flex gap-1 items-center\">\n                      <InfoIcon className=\"text-yellow-300\" size={16} />\n                      <p className=\"text-yellow-300/80 text-xs\">15 left</p>\n                    </div>\n                    <div className=\"\"></div>\n                  </div>\n                </TooltipContent>\n              </Tooltip>\n            </foreignObject>\n          </GlobeSvg>\n        </Globe>\n      </div>\n    </TooltipProvider>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/demo/globe.tsx"
    }
  ],
  "type": "registry:block"
}