"use client"; import { AlertCircle, Check, Link as LinkIcon, Loader2, RefreshCw, Unlink, X, } from "lucide-react"; import { useState } from "react"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@/components/ui/alert-dialog"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { cn } from "@/lib/utils"; export interface Integration { id: string; name: string; description: string; icon?: React.ComponentType<{ className?: string }>; status: "connected" | "disconnected" | "error" | "expired"; lastSynced?: Date; scopes?: string[]; needsReconnection?: boolean; } export interface SettingsIntegrationsProps { integrations?: Integration[]; onConnect?: (integrationId: string) => Promise; onDisconnect?: (integrationId: string) => Promise; onReauthorize?: (integrationId: string) => Promise; className?: string; } const defaultIntegrations: Integration[] = [ { id: "github", name: "GitHub", description: "Connect your GitHub account to sync repositories", status: "connected", lastSynced: new Date(Date.now() - 2 * 60 * 60 * 1000), scopes: ["repo", "read:user"], }, { id: "slack", name: "Slack", description: "Send notifications to your Slack workspace", status: "disconnected", scopes: ["chat:write", "channels:read"], }, { id: "google", name: "Google Drive", description: "Access and sync files from Google Drive", status: "expired", lastSynced: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000), needsReconnection: true, scopes: ["drive.readonly"], }, { id: "stripe", name: "Stripe", description: "Manage payments and subscriptions", status: "error", lastSynced: new Date(Date.now() - 5 * 60 * 60 * 1000), scopes: ["read"], }, ]; function getStatusConfig(status: Integration["status"]) { switch (status) { case "connected": return { label: "Connected", variant: "default" as const, icon: Check, }; case "disconnected": return { label: "Disconnected", variant: "secondary" as const, icon: Unlink, }; case "error": return { label: "Error", variant: "destructive" as const, icon: AlertCircle, }; case "expired": return { label: "Expired", variant: "outline" as const, icon: X, }; } } function formatLastSynced(date?: Date): string { if (!date) return "Never"; const now = Date.now(); const diff = now - date.getTime(); const minutes = Math.floor(diff / 60_000); const hours = Math.floor(minutes / 60); const days = Math.floor(hours / 24); if (minutes < 1) return "Just now"; if (minutes < 60) return `${minutes}m ago`; if (hours < 24) return `${hours}h ago`; return `${days}d ago`; } export default function SettingsIntegrations({ integrations = defaultIntegrations, onConnect, onDisconnect, onReauthorize, className, }: SettingsIntegrationsProps) { const [connecting, setConnecting] = useState(null); const [disconnecting, setDisconnecting] = useState(null); const handleConnect = async (integrationId: string) => { setConnecting(integrationId); try { await onConnect?.(integrationId); } finally { setConnecting(null); } }; const handleDisconnect = async (integrationId: string) => { setDisconnecting(integrationId); try { await onDisconnect?.(integrationId); } finally { setDisconnecting(null); } }; const handleReauthorize = async (integrationId: string) => { setConnecting(integrationId); try { await onReauthorize?.(integrationId); } finally { setConnecting(null); } }; return (

Integrations Connect and manage third-party integrations

{integrations.map((integration) => { const statusConfig = getStatusConfig(integration.status); const StatusIcon = statusConfig.icon; const isConnecting = connecting === integration.id; const isDisconnecting = disconnecting === integration.id; const isConnected = integration.status === "connected"; const needsReconnect = integration.status === "expired" || integration.needsReconnection; return (

{integration.icon && (

)}

{integration.name}

{statusConfig.label}

{integration.description}

{integration.lastSynced && (

Last synced: {formatLastSynced(integration.lastSynced)}

)} {integration.scopes && integration.scopes.length > 0 && (

Permissions:

{integration.scopes.map((scope) => ( {scope} ))}

)}

{isConnected ? ( Disconnect {integration.name}? This will revoke access and stop syncing data from{" "} {integration.name}. You can reconnect anytime. Cancel handleDisconnect(integration.id)} > Disconnect ) : needsReconnect ? ( ) : ( )}

); })}

); }

GitHub

Slack

Google Drive

Stripe

Example Usage