{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "illustration-globe-vercel-demo",
  "type": "registry:component",
  "registryDependencies": [
    "illustration-globe-vercel"
  ],
  "files": [
    {
      "path": "registry/default/example/illustration-globe-vercel-demo.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  DeployGlobe,\n  type DeployNode,\n  type DeployStatus,\n  type TrajectoryStep,\n} from \"@/registry/default/ui/illustration-globe-vercel\"\n\nfunction DemoGlobeVercelControls({\n  status,\n  accent,\n  preset,\n  onStatusChange,\n  onPresetChange,\n  onAccentChange,\n}: {\n  status: DeployStatus\n  accent: string\n  preset: NodePresetName\n  onStatusChange: (status: DeployStatus) => void\n  onPresetChange: (preset: NodePresetName) => void\n  onAccentChange: (color: string) => void\n}) {\n  const pill = (active: boolean) =>\n    ({\n      padding: \"5px 13px\",\n      borderRadius: 999,\n      border: \"none\",\n      background: active\n        ? \"var(--pill-active-bg, #171717)\"\n        : \"var(--pill-bg, #f4f4f5)\",\n      color: active ? \"var(--pill-active-fg, #fff)\" : \"var(--pill-fg, #52525b)\",\n      fontSize: 12,\n      fontWeight: 500,\n      cursor: \"pointer\",\n      fontFamily: \"ui-monospace, SFMono-Regular, monospace\",\n      transition:\n        \"background 160ms ease-out, color 160ms ease-out, transform 160ms ease-out\",\n      letterSpacing: \"0.02em\",\n    }) as React.CSSProperties\n\n  return (\n    <div\n      data-slot=\"deploy-globe-controls\"\n      style={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: 12,\n        alignItems: \"center\",\n        marginBottom: 28,\n      }}\n    >\n      <div\n        style={{\n          display: \"flex\",\n          gap: 6,\n          alignItems: \"center\",\n          flexWrap: \"wrap\",\n          justifyContent: \"center\",\n        }}\n      >\n        <span\n          style={{\n            fontSize: 11,\n            color: \"var(--color-muted-foreground, #a1a1aa)\",\n            fontWeight: 500,\n            textTransform: \"uppercase\",\n            letterSpacing: \"0.08em\",\n            marginRight: 4,\n          }}\n        >\n          Status\n        </span>\n        {([\"deploying\", \"deployed\", \"error\"] as DeployStatus[]).map(\n          (nextStatus) => (\n            <button\n              key={nextStatus}\n              onClick={() => onStatusChange(nextStatus)}\n              onMouseDown={(event) => {\n                event.currentTarget.style.transform = \"scale(0.95)\"\n              }}\n              onMouseLeave={(event) => {\n                event.currentTarget.style.transform = \"scale(1)\"\n              }}\n              onMouseUp={(event) => {\n                event.currentTarget.style.transform = \"scale(1)\"\n              }}\n              style={pill(status === nextStatus)}\n              type=\"button\"\n            >\n              {nextStatus}\n            </button>\n          )\n        )}\n      </div>\n\n      <div\n        style={{\n          display: \"flex\",\n          gap: 6,\n          alignItems: \"center\",\n          flexWrap: \"wrap\",\n          justifyContent: \"center\",\n        }}\n      >\n        <span\n          style={{\n            fontSize: 11,\n            color: \"var(--color-muted-foreground, #a1a1aa)\",\n            fontWeight: 500,\n            textTransform: \"uppercase\",\n            letterSpacing: \"0.08em\",\n            marginRight: 4,\n          }}\n        >\n          Icons\n        </span>\n        {(Object.keys(NODE_PRESETS) as NodePresetName[]).map((nextPreset) => (\n          <button\n            key={nextPreset}\n            onClick={() => onPresetChange(nextPreset)}\n            onMouseDown={(event) => {\n              event.currentTarget.style.transform = \"scale(0.95)\"\n            }}\n            onMouseLeave={(event) => {\n              event.currentTarget.style.transform = \"scale(1)\"\n            }}\n            onMouseUp={(event) => {\n              event.currentTarget.style.transform = \"scale(1)\"\n            }}\n            style={pill(preset === nextPreset)}\n            type=\"button\"\n          >\n            {nextPreset}\n          </button>\n        ))}\n      </div>\n\n      <div\n        style={{\n          display: \"flex\",\n          gap: 6,\n          alignItems: \"center\",\n          flexWrap: \"wrap\",\n          justifyContent: \"center\",\n        }}\n      >\n        <span\n          style={{\n            fontSize: 11,\n            color: \"var(--color-muted-foreground, #a1a1aa)\",\n            fontWeight: 500,\n            textTransform: \"uppercase\",\n            letterSpacing: \"0.08em\",\n            marginRight: 4,\n          }}\n        >\n          Color\n        </span>\n        {COLOR_PRESETS.map((colorPreset) => (\n          <button\n            key={colorPreset.label}\n            onClick={() => onAccentChange(colorPreset.color)}\n            onMouseDown={(event) => {\n              event.currentTarget.style.transform = \"scale(0.88)\"\n            }}\n            onMouseLeave={(event) => {\n              event.currentTarget.style.transform = \"scale(1)\"\n            }}\n            onMouseUp={(event) => {\n              event.currentTarget.style.transform = \"scale(1)\"\n            }}\n            style={{\n              width: 24,\n              height: 24,\n              borderRadius: 999,\n              border: \"none\",\n              background: colorPreset.color,\n              cursor: \"pointer\",\n              boxShadow:\n                accent === colorPreset.color\n                  ? `0 0 0 2px var(--globe-bg, var(--color-background, #fafafa)), 0 0 0 4px ${colorPreset.color}`\n                  : \"0 0 0 1px var(--color-border, rgba(0,0,0,0.08))\",\n              transition: \"box-shadow 160ms ease-out, transform 160ms ease-out\",\n            }}\n            title={colorPreset.label}\n            type=\"button\"\n          />\n        ))}\n      </div>\n    </div>\n  )\n}\n\nconst TRAJ = {\n  a: [\n    [3, 0],\n    [3, 1],\n    [3, 2],\n    [3, 3],\n  ] as TrajectoryStep[],\n  b: [\n    [-3, 0],\n    [-3, 1],\n    [-3, 2],\n    [-3, 3],\n    [-3, 4],\n  ] as TrajectoryStep[],\n  c: [\n    [1, 0],\n    [1, 1],\n    [1, 2],\n  ] as TrajectoryStep[],\n  d: [\n    [-1, 0],\n    [-1, 1],\n    [-2, 1],\n  ] as TrajectoryStep[],\n  e: [\n    [0, 0],\n    [0, 1],\n    [0, 2],\n    [0, 3],\n    [-1, 3],\n  ] as TrajectoryStep[],\n  f: [\n    [2, 0],\n    [2, 1],\n  ] as TrajectoryStep[],\n}\n\nconst DEMO_DOTS: DeployNode[] = [\n  { id: \"a\", trajectory: TRAJ.a },\n  { id: \"b\", trajectory: TRAJ.b },\n  { id: \"c\", trajectory: TRAJ.c },\n  { id: \"d\", trajectory: TRAJ.d },\n  { id: \"e\", trajectory: TRAJ.e },\n  { id: \"f\", trajectory: TRAJ.f },\n]\n\nconst DEMO_TRIANGLES: DeployNode[] = [\n  { id: \"a\", trajectory: TRAJ.a, icon: \"triangle\" },\n  { id: \"b\", trajectory: TRAJ.b, icon: \"triangle\" },\n  { id: \"c\", trajectory: TRAJ.c, icon: \"triangle\" },\n  { id: \"d\", trajectory: TRAJ.d, icon: \"triangle\" },\n  { id: \"e\", trajectory: TRAJ.e, icon: \"triangle\" },\n  { id: \"f\", trajectory: TRAJ.f, icon: \"triangle\" },\n]\n\nconst DEMO_INFRA: DeployNode[] = [\n  { id: \"a\", trajectory: TRAJ.a, icon: \"server\" },\n  { id: \"b\", trajectory: TRAJ.b, icon: \"database\" },\n  { id: \"c\", trajectory: TRAJ.c, icon: \"cloud\" },\n  { id: \"d\", trajectory: TRAJ.d, icon: \"shield\" },\n  { id: \"e\", trajectory: TRAJ.e, icon: \"globe\" },\n  { id: \"f\", trajectory: TRAJ.f, icon: \"zap\" },\n]\n\nconst DEMO_CUSTOM: DeployNode[] = [\n  {\n    id: \"a\",\n    trajectory: TRAJ.a,\n    icon: { d: \"M12 2L2 22h20L12 2z\", viewBox: \"0 0 24 24\" },\n  },\n  {\n    id: \"b\",\n    trajectory: TRAJ.b,\n    icon: { d: \"M4 4h16v16H4z\", viewBox: \"0 0 24 24\" },\n  },\n  {\n    id: \"c\",\n    trajectory: TRAJ.c,\n    icon: { d: \"M12 3a9 9 0 100 18 9 9 0 000-18z\", viewBox: \"0 0 24 24\" },\n  },\n  {\n    id: \"d\",\n    trajectory: TRAJ.d,\n    icon: {\n      d: \"M12 2l8 4v6c0 5-3.8 9.7-8 10-4.2-.3-8-5-8-10V6l8-4z\",\n      viewBox: \"0 0 24 24\",\n    },\n  },\n  {\n    id: \"e\",\n    trajectory: TRAJ.e,\n    icon: { d: \"M12 2v8h8v4h-8v8h-4v-8H0v-4h8V2z\", viewBox: \"0 0 24 24\" },\n  },\n  {\n    id: \"f\",\n    trajectory: TRAJ.f,\n    icon: { d: \"M12 1l10 6v10l-10 6L2 17V7l10-6z\", viewBox: \"0 0 24 24\" },\n  },\n]\n\nconst NODE_PRESETS = {\n  Dots: DEMO_DOTS,\n  Vercel: DEMO_TRIANGLES,\n  Infra: DEMO_INFRA,\n  Custom: DEMO_CUSTOM,\n} as const\n\ntype NodePresetName = keyof typeof NODE_PRESETS\n\nconst COLOR_PRESETS = [\n  { label: \"Blue\", color: \"#3B82F6\" },\n  { label: \"Teal\", color: \"#45DEC4\" },\n  { label: \"Purple\", color: \"#A855F7\" },\n  { label: \"Rose\", color: \"#F43F5E\" },\n  { label: \"Amber\", color: \"#F59E0B\" },\n]\n\nfunction DemoGlobeVercel() {\n  const [status, setStatus] = useState<DeployStatus>(\"deployed\")\n  const [accent, setAccent] = useState(\"#3B82F6\")\n  const [preset, setPreset] = useState<NodePresetName>(\"Vercel\")\n  const activeNodes = NODE_PRESETS[preset]\n\n  return (\n    <div\n      className=\"relative min-w-xl\"\n      data-slot=\"deploy-globe-demo\"\n      style={{\n        minHeight: \"100vh\",\n        // background: \"#fafafa\",\n        background: \"transparent\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        padding: \"32px 20px\",\n        fontFamily: \"'Inter', -apple-system, sans-serif\",\n        WebkitFontSmoothing: \"antialiased\",\n        [\"--pill-active-bg\" as string]: \"var(--color-foreground, #171717)\",\n        [\"--pill-active-fg\" as string]: \"var(--color-background, #fff)\",\n        [\"--pill-bg\" as string]: \"var(--color-muted, #f4f4f5)\",\n        [\"--pill-fg\" as string]: \"var(--color-muted-foreground, #52525b)\",\n      }}\n    >\n      <DemoGlobeVercelControls\n        accent={accent}\n        onAccentChange={setAccent}\n        onPresetChange={setPreset}\n        onStatusChange={setStatus}\n        preset={preset}\n        status={status}\n      />\n\n      <div\n        data-slot=\"deploy-globe-demo-stage\"\n        style={{ width: \"100%\", maxWidth: 680 }}\n      >\n        <DeployGlobe\n          accentColor={status === \"error\" ? undefined : accent}\n          duration={4.5}\n          nodes={activeNodes}\n          status={status}\n        />\n      </div>\n\n      <div className=\"mask-b-from-100% mask-t-from-60% pointer-events-none absolute right-0 bottom-0 left-0 h-96 bg-background\" />\n    </div>\n  )\n}\n\nexport default DemoGlobeVercel\n",
      "type": "registry:component"
    }
  ]
}