"use client" import { useState } from "react" import { motion } from "framer-motion" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { GradientMesh } from "@/components/backgrounds/gradient-mesh" import { scaleIn, stagger, staggerItem, buttonTapTarget } from "@/lib/animations" import { Shield, ArrowRight, RefreshCw } from "lucide-react" export default function TwoFactorAuth() { const [code, setCode] = useState(["", "", "", "", "", ""]) const handleChange = (i: number, value: string) => { if (value.length > 1) return const next = [...code] next[i] = value setCode(next) if (value && i < 5) { const nextInput = document.getElementById(`2fa-${i + 1}`) nextInput?.focus() } } const handleKeyDown = (i: number, e: React.KeyboardEvent) => { if (e.key === "Backspace" && !code[i] && i > 0) { const prevInput = document.getElementById(`2fa-${i - 1}`) prevInput?.focus() } } return (

Two-Factor Authentication Enter the 6-digit code from your authenticator app. {code.map((digit, i) => ( handleChange(i, e.target.value)} onKeyDown={(e) => handleKeyDown(i, e)} className="size-12 text-center text-lg font-bold focus-visible:ring-2 focus-visible:ring-primary/50 transition-shadow duration-200" /> ))}

) }