98:I[903690,["/chat-static/_next/static/immutable/chunks/1gd_iiyt6-6l3.js","/chat-static/_next/static/immutable/chunks/3rjx58sh0g69q.js","/chat-static/_next/static/immutable/chunks/2mir3-5f6t3o5.js","/chat-static/_next/static/immutable/chunks/1t1q53932g_z8.js","/chat-static/_next/static/immutable/chunks/2ftikag4lqb8c.js","/chat-static/_next/static/immutable/chunks/3ftzit08h08g2.js","/chat-static/_next/static/immutable/chunks/43kd14la8rz_-.js","/chat-static/_next/static/immutable/chunks/0qzyexb_zkjwf.js","/chat-static/_next/static/immutable/chunks/1nokw8-t4vcwo.js","/chat-static/_next/static/immutable/chunks/2mce1eey0jgp7.js","/chat-static/_next/static/immutable/chunks/3sctqn1914l5w.js","/chat-static/_next/static/immutable/chunks/0kf8ns9v47bwy.js","/chat-static/_next/static/immutable/chunks/1czp3b0g85f02.js","/chat-static/_next/static/immutable/chunks/228q2klxykhwx.js","/chat-static/_next/static/immutable/chunks/3s8icn-bip0tj.js","/chat-static/_next/static/immutable/chunks/0z875z_91wbfq.js","/chat-static/_next/static/immutable/chunks/2xc_2qy1-o91c.js","/chat-static/_next/static/immutable/chunks/29-21_f000qe1.js","/chat-static/_next/static/immutable/chunks/0d6t47olbp1a6.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/05ww9yr3u_7e6.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/0ai904ok7xmqu.js","/chat-static/_next/static/immutable/chunks/3lzagaof8lynk.js","/chat-static/_next/static/immutable/chunks/2o-n3975q38j1.js","/chat-static/_next/static/immutable/chunks/1oqsuwe1gr52j.js","/chat-static/_next/static/immutable/chunks/38k-aabziryr6.js","/chat-static/_next/static/immutable/chunks/2w4tj5qrgmz4d.js","/chat-static/_next/static/immutable/chunks/0l_1eejseha66.js","/chat-static/_next/static/immutable/chunks/0huj7k3hvxe1h.js","/chat-static/_next/static/immutable/chunks/2n3pdme24p3jh.js","/chat-static/_next/static/immutable/chunks/0mypak46se3mn.js","/chat-static/_next/static/immutable/chunks/0ie61nirtqfup.js","/chat-static/_next/static/immutable/chunks/0kekpx3x_tmu9.js","/chat-static/_next/static/immutable/chunks/2n-979fucx8q4.js","/chat-static/_next/static/immutable/chunks/2iifuow0qvsc-.js","/chat-static/_next/static/immutable/chunks/3iyf4r67538x1.js","/chat-static/_next/static/immutable/chunks/1h7ypp813k57d.js","/chat-static/_next/static/immutable/chunks/194i2pxo915u5.js","/chat-static/_next/static/immutable/chunks/1fk_2p79mzdc3.js","/chat-static/_next/static/immutable/chunks/1-lfgpyon4_ny.js","/chat-static/_next/static/immutable/chunks/27vhedzlts1-t.js","/chat-static/_next/static/immutable/chunks/29t5emya7qxfu.js","/chat-static/_next/static/immutable/chunks/2-8ev24jr3qa3.js","/chat-static/_next/static/immutable/chunks/2y9cujgqfy_t_.js","/chat-static/_next/static/immutable/chunks/2uur2_82erkaw.js"],"ExplicitChatIdProvider"] 99:I[838238,["/chat-static/_next/static/immutable/chunks/1gd_iiyt6-6l3.js","/chat-static/_next/static/immutable/chunks/3rjx58sh0g69q.js","/chat-static/_next/static/immutable/chunks/2mir3-5f6t3o5.js","/chat-static/_next/static/immutable/chunks/1t1q53932g_z8.js","/chat-static/_next/static/immutable/chunks/2ftikag4lqb8c.js","/chat-static/_next/static/immutable/chunks/3ftzit08h08g2.js","/chat-static/_next/static/immutable/chunks/43kd14la8rz_-.js","/chat-static/_next/static/immutable/chunks/0qzyexb_zkjwf.js","/chat-static/_next/static/immutable/chunks/1nokw8-t4vcwo.js","/chat-static/_next/static/immutable/chunks/2mce1eey0jgp7.js","/chat-static/_next/static/immutable/chunks/3sctqn1914l5w.js","/chat-static/_next/static/immutable/chunks/0kf8ns9v47bwy.js","/chat-static/_next/static/immutable/chunks/1czp3b0g85f02.js","/chat-static/_next/static/immutable/chunks/228q2klxykhwx.js","/chat-static/_next/static/immutable/chunks/3s8icn-bip0tj.js","/chat-static/_next/static/immutable/chunks/0z875z_91wbfq.js","/chat-static/_next/static/immutable/chunks/2xc_2qy1-o91c.js","/chat-static/_next/static/immutable/chunks/29-21_f000qe1.js","/chat-static/_next/static/immutable/chunks/0d6t47olbp1a6.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/05ww9yr3u_7e6.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/0ai904ok7xmqu.js","/chat-static/_next/static/immutable/chunks/3lzagaof8lynk.js","/chat-static/_next/static/immutable/chunks/2o-n3975q38j1.js","/chat-static/_next/static/immutable/chunks/1oqsuwe1gr52j.js","/chat-static/_next/static/immutable/chunks/38k-aabziryr6.js","/chat-static/_next/static/immutable/chunks/2w4tj5qrgmz4d.js","/chat-static/_next/static/immutable/chunks/0l_1eejseha66.js","/chat-static/_next/static/immutable/chunks/0huj7k3hvxe1h.js","/chat-static/_next/static/immutable/chunks/2n3pdme24p3jh.js","/chat-static/_next/static/immutable/chunks/0mypak46se3mn.js","/chat-static/_next/static/immutable/chunks/0ie61nirtqfup.js","/chat-static/_next/static/immutable/chunks/0kekpx3x_tmu9.js","/chat-static/_next/static/immutable/chunks/2n-979fucx8q4.js","/chat-static/_next/static/immutable/chunks/2iifuow0qvsc-.js","/chat-static/_next/static/immutable/chunks/3iyf4r67538x1.js","/chat-static/_next/static/immutable/chunks/1h7ypp813k57d.js","/chat-static/_next/static/immutable/chunks/194i2pxo915u5.js","/chat-static/_next/static/immutable/chunks/1fk_2p79mzdc3.js","/chat-static/_next/static/immutable/chunks/1-lfgpyon4_ny.js","/chat-static/_next/static/immutable/chunks/27vhedzlts1-t.js","/chat-static/_next/static/immutable/chunks/29t5emya7qxfu.js","/chat-static/_next/static/immutable/chunks/2-8ev24jr3qa3.js","/chat-static/_next/static/immutable/chunks/2y9cujgqfy_t_.js","/chat-static/_next/static/immutable/chunks/2uur2_82erkaw.js"],"SWRDataProvider"] 9a:T11c9,"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)} /> ))}

)}

) }8e:["$","$L98",null,{"chatId":"KgiNhScXa1Q","children":["$","$L99",null,{"data":{"@\"active-block\",\"KgiNhScXa1Q\",":{"id":"b_GZOdoW4Iari","messageId":"CR6x6XrqM9u1bMzl4085kISq2584Qcck","source":"$9a","language":"typescriptreact","type":"react","closed":true,"meta":{"file":"email-change-dialog.tsx","type":"react","project":"Email Change"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"KgiNhScXa1Q\",":false},"children":"$L9b"}]}]

About

Tags

Share

About

Tags

Share

More from yadwinder

More Templates Like This