{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "connection-card-demo",
  "title": "Connection Card Example",
  "author": "MR <contact@bimframe.co>",
  "description": "A full page rendering Connection Card, with its own sample data — what \"Open in v0\" hands over, and what to copy when wiring the component into a real screen.",
  "registryDependencies": [
    "@cantera/aps-oauth-preset",
    "@cantera/connection-card",
    "@cantera/oauth-types"
  ],
  "files": [
    {
      "path": "registry/examples/connection-card-demo.tsx",
      "content": "'use client'\n\nimport { useState } from 'react'\n\nimport { ConnectionCard } from '@/components/ui/connection-card'\nimport { apsProvider } from '@/lib/aps-oauth-preset'\nimport type { OAuthConnection } from '@/lib/oauth-types'\n\nconst account = { name: 'Dana Alvarez', email: 'dana@ridgelinebuilders.com' }\nconst scopes = ['data:read', 'viewables:read']\n\n/** Stands in for the round trip a real disconnect or reconnect makes. */\nfunction settle(): Promise<void> {\n  return new Promise((resolve) => {\n    setTimeout(resolve, 900)\n  })\n}\n\nexport function ConnectionCardDemo() {\n  const [connected, setConnected] = useState(true)\n\n  const connection: OAuthConnection = connected\n    ? {\n        provider: apsProvider,\n        status: 'connected',\n        account,\n        scopes,\n        expiresAt: Date.now() + 42 * 60_000,\n      }\n    : { provider: apsProvider, status: 'disconnected' }\n\n  return (\n    <ConnectionCard\n      connection={connection}\n      // Both callbacks return a promise, so the card drives its own pending\n      // state: the pressed button keeps its label, spins, and stays put.\n      onDisconnect={async () => {\n        await settle()\n        setConnected(false)\n      }}\n      onReconnect={async () => {\n        await settle()\n        setConnected(true)\n      }}\n    />\n  )\n}\n",
      "type": "registry:component",
      "target": "components/examples/connection-card-demo.tsx"
    },
    {
      "path": "registry/examples/pages/connection-card-demo-page.tsx",
      "content": "// Generated by scripts/build-examples.mts. Edit the demo, not this file.\nimport { ConnectionCardDemo } from '@/components/examples/connection-card-demo'\n\nexport default function Page() {\n  return (\n    <main className=\"flex min-h-svh items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-md\">\n        <ConnectionCardDemo />\n      </div>\n    </main>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/examples/connection-card/page.tsx"
    }
  ],
  "categories": [
    "authentication",
    "connections"
  ],
  "type": "registry:example"
}