Integrations
OAuth connect cards, API key managers, and webhook configuration UIs.
OAuth Connect Card
Card for connecting or disconnecting an OAuth provider integration.
Preview
No preview available
See the code snippet below for usage.
OAuth Connect Card.tsx
import { OAuthConnectCard } from "@launchapp/design-system/blocks/integrations";export default function Page() { return ( <OAuthConnectCard provider={{ id: "github", name: "GitHub", description: "Connect your GitHub account", scopes: ["repo", "user"] }} isConnected={false} onConnect={() => console.log("connect")} onDisconnect={() => console.log("disconnect")} /> );}API Key Manager (Integrations)
Manage third-party API keys for external service integrations.
Preview
No preview available
See the code snippet below for usage.
API Key Manager (Integrations).tsx
import { ApiKeyManager } from "@launchapp/design-system/blocks/integrations";const keys = [ { id: "1", service: "Stripe", key: "sk_live_xxxx", createdAt: "2024-01-01" },];export default function Page() { return ( <ApiKeyManager keys={keys} onAdd={() => console.log("add")} onDelete={(id) => console.log("delete", id)} /> );}Webhook Config
Configure webhook URLs and select event triggers for integrations.
Preview
No preview available
See the code snippet below for usage.
Webhook Config.tsx
import { WebhookConfig } from "@launchapp/design-system/blocks/integrations";export default function Page() { return ( <WebhookConfig endpoint="https://example.com/webhook" events={["payment.succeeded", "subscription.canceled"]} onSave={(config) => console.log("save", config)} /> );}