{
  "name": "IntegrationCard",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/IntegrationCard.tsx",
  "chapterTag": "24 Integrations",
  "chapter": "24-integrations.html",
  "sectionId": "integration-card",
  "elName": "Six cards — Slack, GitHub, Stripe, Notion, Linear, Figma",
  "demoUrl": "https://brand.magicblocks.ai/components/24-integrations#integration-card",
  "hasLiveDemo": false,
  "description": "A directory tile for one third-party integration. Renders the\nvendor's logo + name + status pill in a flex head, an optional\ndescription body, and a consumer-supplied action footer. Designed\nto live inside a `.integration-card-grid` (3×2 on desktop, 2-up at\ntablet, single-column on phone) on the workspace integrations page.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "IntegrationCard",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "IntegrationCardProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "IntegrationStatus",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { IntegrationCard } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "logo",
      "optional": false,
      "type": "ReactNode",
      "doc": "Brand glyph slot — typically a small inline SVG lettermark for the integration's vendor (Slack, GitHub, Stripe…). Sized to a 40×40 box; the consumer-supplied node should self-centre inside that frame."
    },
    {
      "name": "name",
      "optional": false,
      "type": "string",
      "doc": "Integration name (e.g. \"Slack\", \"GitHub\"). Rendered as the primary 14px label next to the logo."
    },
    {
      "name": "description",
      "optional": true,
      "type": "string",
      "doc": "One-sentence description of what the integration does. Optional — the card collapses cleanly when omitted."
    },
    {
      "name": "status",
      "optional": false,
      "type": "IntegrationStatus",
      "doc": "Connection state — drives the status pill (dot + label) at the top of the card. The four values map to coloured pills: `connected` → success, `disconnected` → muted, `error` → error, `pending` → warning."
    },
    {
      "name": "action",
      "optional": true,
      "type": "ReactNode",
      "doc": "Consumer-supplied footer action — typically a Connect / Manage / Retry button, depending on `status`. Pinned to the bottom of the card so unequal description lengths don't misalign the action row."
    },
    {
      "name": "category",
      "optional": true,
      "type": "string",
      "doc": "Optional category label (e.g. \"Productivity\", \"Developer\"). Not rendered by the card directly — consumed by `<IntegrationsGrid>` (section 26.2) for filter-chip routing."
    },
    {
      "name": "className",
      "optional": true,
      "type": "string",
      "doc": ""
    }
  ],
  "classesUsed": [
    "btn",
    "btn-ghost",
    "integration-card",
    "integration-card-action",
    "integration-card-desc",
    "integration-card-head",
    "integration-card-logo",
    "integration-card-name",
    "integration-card-status",
    "integration-card-status-dot"
  ],
  "examples": {
    "react": "<IntegrationCard\n  logo={<SlackLogo />}\n  name=\"Slack\"\n  description=\"Send deal updates to a channel.\"\n  status=\"connected\"\n  category=\"Productivity\"\n  action={<button type=\"button\" className=\"btn btn-ghost\">Manage</button>}\n/>",
    "html": "<div class=\"integration-card-grid\">\n  <div class=\"integration-card\">\n    <div class=\"integration-card-head\">\n      <span class=\"integration-card-logo\"><svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" aria-hidden=\"true\"><rect width=\"40\" height=\"40\" rx=\"8\" fill=\"#611F69\"/><text x=\"20\" y=\"26\" text-anchor=\"middle\" font-family=\"ui-monospace, monospace\" font-size=\"16\" font-weight=\"700\" fill=\"#fff\">S</text></svg></span>\n      <span class=\"integration-card-name\">Slack</span>\n      <span class=\"integration-card-status is-connected\"><span class=\"integration-card-status-dot\" aria-hidden=\"true\"></span>Connected</span>\n    </div>\n    <p class=\"integration-card-desc\">Send deal updates and pipeline notifications to a channel.</p>\n    <div class=\"integration-card-action\"><button type=\"button\" class=\"btn btn-ghost\">Manage</button></div>\n  </div>\n  <div class=\"integration-card\">\n    <div class=\"integration-card-head\">\n      <span class=\"integration-card-logo\"><svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" aria-hidden=\"true\"><rect width=\"40\" height=\"40\" rx=\"8\" fill=\"#191E32\"/><text x=\"20\" y=\"26\" text-anchor=\"middle\" font-family=\"ui-monospace, monospace\" font-size=\"16\" font-weight=\"700\" fill=\"#fff\">G</text></svg></span>\n      <span class=\"integration-card-name\">GitHub</span>\n      <span class=\"integration-card-status is-connected\"><span class=\"integration-card-status-dot\" aria-hidden=\"true\"></span>Connected</span>\n    </div>\n    <p class=\"integration-card-desc\">Open pull requests and surface review status on deal cards.</p>\n    <div class=\"integration-card-action\"><button type=\"button\" class=\"btn btn-ghost\">Manage</button></div>\n  </div>\n  <div class=\"integration-card\">\n    <div class=\"integration-card-head\">\n      <span class=\"integration-card-logo\"><svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" aria-hidden=\"true\"><rect width=\"40\" height=\"40\" rx=\"8\" fill=\"#635BFF\"/><text x=\"20\" y=\"26\" text-anchor=\"middle\" font-family=\"ui-monospace, monospace\" font-size=\"16\" font-weight=\"700\" fill=\"#fff\">St</text></svg></span>\n      <span class=\"integration-card-name\">Stripe</span>\n      <span class=\"integration-card-status is-error\"><span class=\"integration-card-status-dot\" aria-hidden=\"true\"></span>Error</span>\n    </div>\n    <p class=\"integration-card-desc\">Pull invoice and subscription data into the billing tab.</p>\n    <div class=\"integration-card-action\"><button type=\"button\" class=\"btn btn-ghost\">Retry</button></div>\n  </div>\n  <div class=\"integration-card\">\n    <div class=\"integration-card-head\">\n      <span class=\"integration-card-logo\"><svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" aria-hidden=\"true\"><rect width=\"40\" height=\"40\" rx=\"8\" fill=\"#191E32\"/><text x=\"20\" y=\"26\" text-anchor=\"middle\" font-family=\"ui-monospace, monospace\" font-size=\"16\" font-weight=\"700\" fill=\"#fff\">N</text></svg></span>\n      <span class=\"integration-card-name\">Notion</span>\n      <span class=\"integration-card-status is-disconnected\"><span class=\"integration-card-status-dot\" aria-hidden=\"true\"></span>Disconnected</span>\n    </div>\n    <p class=\"integration-card-desc\">Mirror meeting notes and project briefs into linked records.</p>\n    <div class=\"integration-card-action\"><button type=\"button\" class=\"btn btn-primary\">Connect</button></div>\n  </div>\n  <div class=\"integration-card\">\n    <div class=\"integration-card-head\">\n      <span class=\"integration-card-logo\"><svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" aria-hidden=\"true\"><rect width=\"40\" height=\"40\" rx=\"8\" fill=\"#5E6AD2\"/><text x=\"20\" y=\"26\" text-anchor=\"middle\" font-family=\"ui-monospace, monospace\" font-size=\"16\" font-weight=\"700\" fill=\"#fff\">L</text></svg></span>\n      <span class=\"integration-card-name\">Linear</span>\n      <span class=\"integration-card-status is-pending\"><span class=\"integration-card-status-dot\" aria-hidden=\"true\"></span>Pending</span>\n    </div>\n    <p class=\"integration-card-desc\">Two-way sync issues to deals — awaiting OAuth confirmation.</p>\n    <div class=\"integration-card-action\"><button type=\"button\" class=\"btn btn-ghost\">Cancel</button></div>\n  </div>\n  <div class=\"integration-card\">\n    <div class=\"integration-card-head\">\n      <span class=\"integration-card-logo\"><svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" aria-hidden=\"true\"><rect width=\"40\" height=\"40\" rx=\"8\" fill=\"#F24E1E\"/><text x=\"20\" y=\"26\" text-anchor=\"middle\" font-family=\"ui-monospace, monospace\" font-size=\"16\" font-weight=\"700\" fill=\"#fff\">F</text></svg></span>\n      <span class=\"integration-card-name\">Figma</span>\n      <span class=\"integration-card-status is-disconnected\"><span class=\"integration-card-status-dot\" aria-hidden=\"true\"></span>Disconnected</span>\n    </div>\n    <p class=\"integration-card-desc\">Embed design file previews and version links on records.</p>\n    <div class=\"integration-card-action\"><button type=\"button\" class=\"btn btn-primary\">Connect</button></div>\n  </div>\n</div>",
    "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.integration-card {\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-3);\n  padding: var(--s-4);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n  background: var(--bg-paper);\n}\n\n.integration-card-action {\n  margin-top: auto;\n}\n\n.integration-card-desc {\n  font: 400 13px/1.5 var(--f-body);\n  color: var(--fg-soft);\n  margin: 0;\n}\n\n.integration-card-head {\n  display: flex;\n  align-items: center;\n  gap: var(--s-3);\n}\n\n.integration-card-logo {\n  width: 40px;\n  height: 40px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--fg);\n  flex-shrink: 0;\n}\n\n.integration-card-name {\n  font: 600 14px/1.3 var(--f-body);\n  color: var(--fg);\n}\n\n.integration-card-status {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font: 500 11px/1 var(--f-mono);\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n}\n\n.integration-card-status-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: currentColor;\n}"
  }
}