{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "account-2fa-01",
  "type": "registry:block",
  "description": "Two-factor authentication setup",
  "registryDependencies": [
    "button",
    "card",
    "input",
    "label",
    "switch"
  ],
  "files": [
    {
      "path": "creative-tim-ui/blocks/account-2fa-01/page.tsx",
      "content": "\"use client\"\n\nimport {\n  AlertCircle,\n  CheckCircle2,\n  KeyRound,\n  MessageSquare,\n  Shield,\n  Smartphone,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card } from \"@/components/ui/card\"\n\nconst TwoFactorMethods = [\n  {\n    title: \"Security Keys\",\n    description:\n      \"Physical security keys provide the highest level of protection by requiring a hardware device for authentication.\",\n    value: \"No security keys configured\",\n    action: \"Add\",\n    icon: KeyRound,\n    isConfigured: false,\n    recommended: true,\n  },\n  {\n    title: \"Authenticator App\",\n    description:\n      \"Generate time-based one-time passwords (TOTP) using apps like Google Authenticator or Authy.\",\n    value: \"Not configured\",\n    action: \"Setup\",\n    icon: Smartphone,\n    isConfigured: false,\n    recommended: true,\n  },\n  {\n    title: \"SMS Number\",\n    description:\n      \"Receive verification codes via text message to your registered mobile number.\",\n    value: \"+1 (555) 123-4567\",\n    action: \"Edit\",\n    icon: MessageSquare,\n    isConfigured: true,\n    recommended: false,\n  },\n]\n\nexport default function Account2FA01() {\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 flex flex-wrap items-start justify-between gap-4 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                Two-Factor Authentication\n              </h2>\n              <p className=\"text-muted-foreground mt-1 text-sm\">\n                Add an extra layer of security to your account\n              </p>\n            </div>\n          </div>\n          <Badge\n            variant=\"outline\"\n            className=\"border-green-500 bg-green-50 text-green-700\"\n          >\n            <CheckCircle2 className=\"mr-1 h-3 w-3\" />\n            Enabled\n          </Badge>\n        </div>\n\n        <div className=\"space-y-0\">\n          {TwoFactorMethods.map((method, index) => {\n            const Icon = method.icon\n            return (\n              <div\n                key={method.title}\n                className={`group flex flex-wrap items-center justify-between gap-6 py-6 ${\n                  index !== TwoFactorMethods.length - 1\n                    ? \"border-border border-b\"\n                    : \"\"\n                }`}\n              >\n                <div className=\"flex items-start gap-4\">\n                  <div\n                    className={`bg-muted flex h-12 w-12 shrink-0 items-center justify-center rounded-lg ${method.isConfigured ? \"bg-primary/10\" : \"\"}`}\n                  >\n                    <Icon\n                      className={`h-6 w-6 ${method.isConfigured ? \"text-primary\" : \"text-muted-foreground\"}`}\n                    />\n                  </div>\n                  <div className=\"flex-1 space-y-2\">\n                    <div className=\"flex items-center gap-2\">\n                      <p className=\"font-semibold\">{method.title}</p>\n                      {method.recommended && (\n                        <span className=\"text-primary border-primary bg-primary/10 rounded-full border px-2 py-0.5 text-xs font-medium\">\n                          Recommended\n                        </span>\n                      )}\n                    </div>\n                    <p className=\"text-muted-foreground text-sm\">\n                      {method.description}\n                    </p>\n                    <p\n                      className={`text-sm ${\n                        method.isConfigured\n                          ? \"font-semibold\"\n                          : \"text-muted-foreground\"\n                      }`}\n                    >\n                      {method.isConfigured && (\n                        <CheckCircle2 className=\"mr-1 inline h-4 w-4 text-green-500\" />\n                      )}\n                      {method.value}\n                    </p>\n                  </div>\n                </div>\n                <Button\n                  size=\"sm\"\n                  variant={method.isConfigured ? \"outline\" : \"default\"}\n                >\n                  {method.action}\n                </Button>\n              </div>\n            )\n          })}\n        </div>\n\n        <div className=\"mt-8 space-y-4\">\n          <div className=\"bg-muted/50 flex items-start gap-3 rounded-lg border p-4\">\n            <AlertCircle className=\"mt-0.5 h-5 w-5 text-blue-500\" />\n            <div>\n              <h4 className=\"mb-1 text-sm font-medium\">Recovery Codes</h4>\n              <p className=\"text-muted-foreground text-sm\">\n                Generate backup codes that can be used if you lose access to\n                your 2FA methods. Store them securely in a safe place.\n              </p>\n              <Button variant=\"link\" className=\"mt-2 h-auto p-0 text-sm\">\n                Generate Recovery Codes →\n              </Button>\n            </div>\n          </div>\n\n          <div className=\"flex justify-end gap-3 border-t pt-6\">\n            <Button variant=\"outline\">View Activity Log</Button>\n            <Button>Save Settings</Button>\n          </div>\n        </div>\n      </Card>\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/account-2fa/page.tsx"
    }
  ],
  "meta": {
    "iframeHeight": "800px",
    "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",
    "details": "Secure your account with two-factor authentication. Enable authenticator apps, configure backup codes, and manage security verification methods for enhanced account protection."
  },
  "categories": [
    "account"
  ]
}