{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "account-integrations-01",
  "type": "registry:block",
  "description": "Third-party integrations management",
  "registryDependencies": [
    "button",
    "card",
    "switch"
  ],
  "files": [
    {
      "path": "creative-tim-ui/blocks/account-integrations-01/page.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Check,\n  ChevronDown,\n  Copy,\n  ExternalLink,\n  Github,\n  MessageCircle,\n  Shield,\n} from \"lucide-react\"\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card } from \"@/components/ui/card\"\nimport { Label } from \"@/components/ui/label\"\nimport { Switch } from \"@/components/ui/switch\"\n\nconst INTEGRATIONS = [\n  {\n    id: \"github\",\n    name: \"GitHub\",\n    icon: Github,\n    category: \"Development\",\n    description:\n      \"Connect your GitHub account to sync repositories and track contributions.\",\n    isConfigured: false,\n    connectedEmail: null,\n    verificationCode: null,\n  },\n  {\n    id: \"spotify\",\n    name: \"Spotify\",\n    icon: MessageCircle, // Replaced Spotify icon with MessageCircle\n    category: \"Music\",\n    description:\n      \"Link your Spotify account to share playlists and sync listening activity.\",\n    isConfigured: true,\n    connectedEmail: \"emma@mail.com\",\n    verificationCode: \"1172913\",\n  },\n  {\n    id: \"discord\",\n    name: \"Discord\",\n    icon: MessageCircle,\n    category: \"Communication\",\n    description:\n      \"Integrate your Discord account to manage server connections and notifications.\",\n    isConfigured: false,\n    connectedEmail: null,\n    verificationCode: null,\n  },\n]\n\nexport default function AccountIntegrations01() {\n  const [activeIntegrations, setActiveIntegrations] = React.useState<\n    Record<string, boolean>\n  >(\n    INTEGRATIONS.reduce(\n      (acc, integration) => {\n        acc[integration.id] = integration.isConfigured\n        return acc\n      },\n      {} as Record<string, boolean>\n    )\n  )\n  const [copiedCode, setCopiedCode] = React.useState<string | null>(null)\n\n  const toggleIntegration = (id: string) => {\n    setActiveIntegrations((prev) => ({\n      ...prev,\n      [id]: !prev[id],\n    }))\n  }\n\n  const copyVerificationCode = (code: string) => {\n    navigator.clipboard.writeText(code)\n    setCopiedCode(code)\n    setTimeout(() => setCopiedCode(null), 2000)\n  }\n\n  return (\n    <div className=\"mx-auto max-w-5xl p-6\">\n      <Card className=\"bg-card border p-8\">\n        <div className=\"mb-8 border-b pb-6\">\n          <div className=\"flex items-center gap-3\">\n            <div className=\"bg-primary/10 flex h-12 w-12 items-center justify-center rounded-lg\">\n              <Shield className=\"text-primary h-6 w-6\" />\n            </div>\n            <div>\n              <h2 className=\"text-2xl font-semibold tracking-tight\">\n                Third-Party Integrations\n              </h2>\n              <p className=\"text-muted-foreground mt-1 text-sm\">\n                Manage and configure connections to external services and\n                platforms\n              </p>\n            </div>\n          </div>\n        </div>\n\n        <Accordion type=\"single\" collapsible className=\"space-y-4\">\n          {INTEGRATIONS.map((integration) => {\n            const Icon = integration.icon\n            const isActive = activeIntegrations[integration.id]\n\n            return (\n              <AccordionItem\n                key={integration.id}\n                value={integration.id}\n                className=\"border-border rounded-lg border\"\n              >\n                <div className=\"flex items-center justify-between px-4 py-4\">\n                  <div className=\"flex flex-1 items-center gap-4\">\n                    <div className=\"bg-muted/50 flex h-12 w-12 items-center justify-center rounded-lg\">\n                      <Icon\n                        className={`h-6 w-6 ${isActive ? \"text-primary\" : \"text-muted-foreground\"}`}\n                      />\n                    </div>\n                    <div className=\"flex-1 space-y-1 text-left\">\n                      <div className=\"flex items-center gap-2\">\n                        <h3 className=\"font-semibold\">{integration.name}</h3>\n                        <Badge\n                          variant=\"outline\"\n                          className=\"text-muted-foreground\"\n                        >\n                          {integration.category}\n                        </Badge>\n                      </div>\n                      <p className=\"text-muted-foreground line-clamp-1 text-sm\">\n                        {integration.description}\n                      </p>\n                    </div>\n                  </div>\n                  <div className=\"flex items-center gap-3\">\n                    <div className=\"flex items-center gap-2\">\n                      <Switch\n                        id={`${integration.id}-toggle`}\n                        checked={isActive}\n                        onCheckedChange={() =>\n                          toggleIntegration(integration.id)\n                        }\n                      />\n                      <Label\n                        htmlFor={`${integration.id}-toggle`}\n                        className=\"cursor-pointer text-sm\"\n                      >\n                        {isActive ? \"Enabled\" : \"Enable\"}\n                      </Label>\n                    </div>\n                    <AccordionTrigger className=\"hover:bg-muted/50 rounded px-3 py-2\">\n                      <span className=\"text-sm font-medium\">View More</span>\n                    </AccordionTrigger>\n                  </div>\n                </div>\n                <AccordionContent className=\"px-4 pb-6\">\n                  {!isActive ? (\n                    <div className=\"space-y-4\">\n                      <p className=\"text-muted-foreground text-sm\">\n                        You haven&apos;t added your {integration.name} account\n                        or you aren&apos;t authorized. Click &quot;Connect&quot;\n                        to initiate the integration process.\n                      </p>\n                      <Button>\n                        <ExternalLink className=\"mr-2 h-4 w-4\" />\n                        Connect {integration.name}\n                      </Button>\n                    </div>\n                  ) : integration.connectedEmail ? (\n                    <div className=\"space-y-4\">\n                      <Card className=\"bg-muted/50 border p-4\">\n                        <div className=\"flex items-center justify-between\">\n                          <div className=\"space-y-1\">\n                            <h4 className=\"font-semibold\">Verification Code</h4>\n                            <p className=\"text-muted-foreground text-sm\">\n                              Use this code to complete the integration\n                            </p>\n                          </div>\n                          <div className=\"flex items-center gap-3\">\n                            <code className=\"bg-muted/50 rounded px-3 py-1 font-mono text-sm\">\n                              {integration.verificationCode}\n                            </code>\n                            <Button\n                              variant=\"outline\"\n                              size=\"sm\"\n                              onClick={() =>\n                                copyVerificationCode(\n                                  integration.verificationCode!\n                                )\n                              }\n                            >\n                              {copiedCode === integration.verificationCode ? (\n                                <Check className=\"mr-2 h-4 w-4 text-green-500\" />\n                              ) : (\n                                <Copy className=\"mr-2 h-4 w-4\" />\n                              )}\n                              {copiedCode === integration.verificationCode\n                                ? \"Copied\"\n                                : \"Copy\"}\n                            </Button>\n                          </div>\n                        </div>\n                      </Card>\n                      <Card className=\"bg-muted/50 border p-4\">\n                        <div className=\"flex items-center justify-between\">\n                          <div className=\"space-y-1\">\n                            <h4 className=\"font-semibold\">Connected Account</h4>\n                            <p className=\"text-muted-foreground text-sm\">\n                              Manage your linked {integration.name} account\n                            </p>\n                          </div>\n                          <div className=\"flex items-center gap-3\">\n                            <span className=\"text-sm font-medium\">\n                              {integration.connectedEmail}\n                            </span>\n                            <Button variant=\"outline\" size=\"sm\">\n                              Edit\n                            </Button>\n                          </div>\n                        </div>\n                      </Card>\n                    </div>\n                  ) : null}\n                </AccordionContent>\n              </AccordionItem>\n            )\n          })}\n        </Accordion>\n\n        <div className=\"bg-muted/50 mt-6 rounded-lg border p-4\">\n          <div className=\"flex items-start gap-3\">\n            <Shield className=\"mt-0.5 h-5 w-5 text-blue-500\" />\n            <div>\n              <h4 className=\"mb-1 text-sm font-medium\">Integration Security</h4>\n              <p className=\"text-muted-foreground text-sm\">\n                Ensure you trust the applications you connect. Review and manage\n                third-party access to your account regularly. You can revoke\n                access at any time by disabling the integration.\n              </p>\n            </div>\n          </div>\n        </div>\n      </Card>\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/account-integrations/page.tsx"
    }
  ],
  "meta": {
    "iframeHeight": "900px",
    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-center md:py-20 justify-center min-w-0",
    "mobile": "component"
  },
  "categories": [
    "account"
  ]
}