"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=\"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",
0 commit comments