{
  "name": "IntegrationsPage",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/IntegrationsPage.tsx",
  "chapterTag": "23 Workspace",
  "chapter": "23-workspace.html",
  "sectionId": null,
  "elName": null,
  "demoUrl": null,
  "hasLiveDemo": false,
  "description": "Page-shaped wrapper composing chapter 26's integrations primitives into a\ncomplete integrations-page layout. Sections render in order: optional\nOAuth-callback banner → Integrations grid → Webhook deliveries. Each\nnon-banner section gets a small uppercase label above its content.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "IntegrationsPage",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "IntegrationsPageProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { IntegrationsPage } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "banner",
      "optional": true,
      "type": "OAuthCallbackBannerProps",
      "doc": "Optional callback banner rendered above the integrations grid. Pass an `<OAuthCallbackBannerProps>`-shaped object to surface the outcome of a just-completed OAuth round-trip (`\"Slack connected\"`, etc.); omit the prop and the banner section disappears entirely."
    },
    {
      "name": "integrations",
      "optional": false,
      "type": "IntegrationCardProps[]",
      "doc": "Integration tiles laid out by `<IntegrationsGrid>` into a 3×N responsive grid. One `<IntegrationCard>` per entry, keyed by `name`."
    },
    {
      "name": "categories",
      "optional": true,
      "type": "string[]",
      "doc": "Optional list of category filter chips rendered above the grid (passed straight to `<IntegrationsGrid>`). When omitted, the filter row is not rendered and the grid is a pure card list."
    },
    {
      "name": "webhookDeliveries",
      "optional": false,
      "type": "WebhookConsoleProps[\"deliveries\"]",
      "doc": "Webhook deliveries passed straight to `<WebhookConsole>`. Renders the console table beneath the integrations grid; the wrapper section gets the \"Webhook deliveries\" uppercase label above it."
    },
    {
      "name": "sectionLabels",
      "optional": true,
      "type": "{ integrations?: string",
      "doc": "Optional section-label overrides. Defaults: \"Integrations\", \"Webhook deliveries\"."
    },
    {
      "name": "webhookDeliveries",
      "optional": true,
      "type": "string; }",
      "doc": ""
    },
    {
      "name": "className",
      "optional": true,
      "type": "string",
      "doc": ""
    }
  ],
  "classesUsed": [
    "btn",
    "btn-ghost",
    "integrations-page",
    "integrations-page-section",
    "integrations-page-section-label"
  ],
  "examples": {
    "react": "<IntegrationsPage\n  banner={{\n    intent: \"success\",\n    title: \"Slack connected\",\n    description: \"We've linked your workspace. Webhooks will start firing in 30 seconds.\",\n    actions: <a className=\"btn btn-ghost\" href=\"/settings/integrations/slack\">View setup</a>,\n  }}\n  categories={[\"All\", \"Productivity\", \"Developer\", \"Payments\"]}\n  integrations={[\n    { logo: <SlackLogo />, name: \"Slack\", description: \"Send deal updates…\",\n      status: \"connected\", category: \"Productivity\",\n      action: <button type=\"button\" className=\"btn btn-ghost\">Manage</button> },\n    // …\n  ]}\n  webhookDeliveries={[\n    { id: \"d1\", timestamp: \"10:34:12\", endpoint: \"POST /webhooks/slack\",\n      eventType: \"lead.created\", statusCode: 200, durationMs: 142 },\n    // …\n  ]}\n/>",
    "html": null,
    "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.integrations-page {\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-8);\n}\n\n.integrations-page-section {\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-4);\n}\n\n.integrations-page-section-label {\n  margin: 0;\n  font: 600 16px/1.2 var(--f-display);\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--fg-soft);\n}"
  }
}