Integrations

import { Integrations } from "@/components/blocks/integrations";

"use client";

import { Integrations } from "@/components/blocks/integrations";

const integrations = [
  {
    id: "google-drive",
    name: "Google Drive",
    category: "Cloud storage",
    slug: "google-drive",
    // Present = connected; the row shows the account and a Disconnect button.
    account: "jacob@churchmediasquad.com",
  },
  {
    id: "slack",
    name: "Slack",
    category: "Communication",
    slug: "slack",
  },
];

export function Example() {
  return (
    <Integrations
      integrations={integrations}
      onToggle={(integration, connected) =>
        console.log(integration.id, connected)
      }
    />
  );
}

Integrations                      (single component — pass everything as props)
└── ItemList                      (card-per-row list, see /item-list)
    └── row  ← one Integration
        ├── icon      — brand mark from TheSVG (`slug` → cdn.jsdelivr.net/gh/glincker/thesvg)
        ├── title     — name
        ├── subtitle  — category
        ├── account   — linked account, or muted "Not connected"
        └── action    — Button, one fixed-width track so every label matches
                        outline     "Connect"      — no account linked
                        destructive "Disconnect"   — linked and healthy
                        amber ghost "Reconnect"    — needsReconnect
                        disabled    "Coming soon"  — comingSoon (row greys out)
                        disabled    "Connecting…"  — pending (spinner in the account cell)