"use client" import { useState } from "react" import { Pencil } from 'lucide-react' import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" export default function Component() { const [isEditing, setIsEditing] = useState(false) const [email, setEmail] = useState("yadwinder@gmail.com") const [newEmail, setNewEmail] = useState("") const [isVerifying, setIsVerifying] = useState(false) const [otp, setOtp] = useState(["", "", "", "", "", ""]) const handleContinue = () => { setIsVerifying(true) } const handleVerify = () => { // Here you would typically verify the OTP with your backend setEmail(newEmail) setIsEditing(false) setIsVerifying(false) setNewEmail("") setOtp(["", "", "", "", "", ""]) } const handleOtpChange = (index: number, value: string) => { const newOtp = [...otp] newOtp[index] = value setOtp(newOtp) // Move focus to the next input if (value && index < 5) { const nextInput = document.getElementById(`otp-${index + 1}`) if (nextInput) { nextInput.focus() } } } return (

{isEditing && (

{isVerifying ? "Verify your email" : "Change email address"}

{isVerifying ? `Enter the 6-digit code sent to ${newEmail}` : "A text message containing a 6-digit OTP will be sent to this email address for verification."}

{!isVerifying ? (

New email address setNewEmail(e.target.value)} />

) : (

Verification code

{otp.map((digit, index) => ( handleOtpChange(index, e.target.value)} /> ))}

)}

) }