{ "name": "OAuthCallbackBanner", "package": "@magicblocksai/ui", "file": "packages/ui/src/components/OAuthCallbackBanner.tsx", "chapterTag": "24 Integrations", "chapter": "24-integrations.html", "sectionId": "oauth-callback-banner", "elName": "Three banners stacked — success / failure / pending", "demoUrl": "https://brand.magicblocks.ai/components/24-integrations#oauth-callback-banner", "hasLiveDemo": false, "description": "A page-level banner that confirms the outcome of an OAuth round-trip —\n\"Slack connected\", \"Connection failed\", \"Awaiting confirmation\". Three\nintents (`success` / `failure` / `pending`) drive both the colour pair\n(success → `--success-*`, failure → `--error-*`, pending →\n`--warning-*`) and the leading icon glyph (tick / cross / clock).", "useClient": false, "interactivity": "display", "namedExports": [ { "name": "OAuthCallbackBanner", "isPrincipal": true, "isType": false }, { "name": "OAuthCallbackBannerProps", "isPrincipal": false, "isType": true }, { "name": "OAuthCallbackIntent", "isPrincipal": false, "isType": false } ], "importStatement": "import { OAuthCallbackBanner } from \"@magicblocksai/ui\";", "props": [ { "name": "intent", "optional": false, "type": "OAuthCallbackIntent", "doc": "Outcome state of the OAuth round-trip. Drives the colour pair via the `data-intent` attribute: `success` → `--success-*` (green), `failure` → `--error-*` (red), `pending` → `--warning-*` (amber). Also picks which icon glyph renders to the left of the title: tick for success, cross for failure, clock for pending." }, { "name": "title", "optional": false, "type": "ReactNode", "doc": "Title line — typically the outcome at-a-glance (\"Slack connected\", \"Connection failed\", \"Awaiting confirmation\"). Rendered in `--f-body` 14px 600 weight on the intent's `*-text` colour." }, { "name": "description", "optional": true, "type": "ReactNode", "doc": "Optional body — a sentence explaining what's next (the wait time before webhooks fire, the cause of the failure, the destination of the verification email). Rendered at 13px with the intent's `*-text` colour at 0.85 opacity so it reads as supporting copy." }, { "name": "actions", "optional": true, "type": "ReactNode", "doc": "Optional action slot — typically one or two buttons / links pinned to the right of the body (a \"View setup\" link on success, a \"Retry\" + \"Contact support\" pair on failure). Below 480px the slot drops beneath the title block and stretches to full width." }, { "name": "className", "optional": true, "type": "string", "doc": "" } ], "classesUsed": [ "btn", "btn-ghost", "oauth-callback-banner", "oauth-callback-banner-actions", "oauth-callback-banner-desc", "oauth-callback-banner-icon", "oauth-callback-banner-text", "oauth-callback-banner-title", "title" ], "examples": { "react": "View setup}\n/>", "html": "
\n \n \n \n
", "css": ".btn {\n display: inline-flex; align-items: center; justify-content: center;\n gap: var(--s-2);\n font: 600 14.5px/1 var(--f-display);\n letter-spacing: -0.005em;\n padding: 11px var(--s-5);\n border: 1px solid transparent;\n border-radius: var(--r-md);\n cursor: pointer;\n text-decoration: none;\n transition: background var(--dur-2) var(--ease),\n border-color var(--dur-2) var(--ease),\n transform var(--dur-2) var(--ease),\n box-shadow var(--dur-2) var(--ease),\n color var(--dur-2) var(--ease);\n user-select: none;\n white-space: nowrap;\n appearance: none; -webkit-appearance: none;\n}\n.btn { padding: 11px var(--s-5); font-size: 14.5px; }\n\n.btn-ghost {\n background: transparent;\n color: var(--fg);\n border-color: transparent;\n}\n\n.oauth-callback-banner {\n display: flex;\n gap: var(--s-3);\n padding: var(--s-3) var(--s-4);\n border-radius: var(--r-md);\n border: 1px solid;\n align-items: flex-start;\n}\n\n.oauth-callback-banner-actions {\n flex-shrink: 0;\n display: flex;\n gap: var(--s-2);\n}\n\n.oauth-callback-banner-desc { font: 400 13px/1.5 var(--f-body); opacity: 0.85; }\n\n.oauth-callback-banner-icon {\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n}\n\n.oauth-callback-banner-text {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.oauth-callback-banner-title { font: 600 14px/1.3 var(--f-body); }\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }" } }