{
  "name": "pending-link-demo",
  "type": "registry:example",
  "registryDependencies": [
    "pending"
  ],
  "files": [
    {
      "path": "examples/pending-link-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { Pending } from \"@/registry/bases/radix/components/pending\";\n\nexport default function PendingLinkDemo() {\n  const [isPending, setIsPending] = React.useState(false);\n\n  const onNavigate = React.useCallback(\n    (event: React.MouseEvent<HTMLAnchorElement>) => {\n      event.preventDefault();\n      setIsPending(true);\n\n      // Simulate async navigation\n      setTimeout(() => {\n        setIsPending(false);\n      }, 2000);\n    },\n    [],\n  );\n\n  return (\n    <div className=\"flex items-center justify-center\">\n      <Pending isPending={isPending}>\n        <a\n          href=\"/docs/components/pending\"\n          onClick={onNavigate}\n          className=\"text-primary underline-offset-4 hover:underline\"\n        >\n          {isPending ? \"Loading dashboard...\" : \"Go to Dashboard\"}\n        </a>\n      </Pending>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}