import React, { useState, useEffect } from 'react'; import { Head, Link } from '@inertiajs/react'; import { ArrowLeft, Loader2, Smartphone } from 'lucide-react'; export default function EmployerOTP() { const [otp, setOtp] = useState(['', '', '', '']); const [timer, setTimer] = useState(59); const [processing, setProcessing] = useState(false); useEffect(() => { const interval = setInterval(() => { if (timer > 0) setTimer(timer - 1); }, 1000); return () => clearInterval(interval); }, [timer]); const handleChange = (index, value) => { if (value.length <= 1 && /^\d*$/.test(value)) { const newOtp = [...otp]; newOtp[index] = value; setOtp(newOtp); if (value && index < 3) { document.getElementById(`otp-${index + 1}`).focus(); } } }; const handleSubmit = (e) => { e.preventDefault(); setProcessing(true); setTimeout(() => { window.location.href = '/mobile/employer/home'; }, 1500); }; return (

Verify email

Enter the code sent to your email address

{otp.map((digit, i) => ( handleChange(i, e.target.value)} className="w-16 h-18 bg-slate-50 border border-slate-200 rounded-2xl text-center text-2xl font-bold text-slate-900 focus:bg-white focus:ring-2 focus:ring-[#185FA5]/10 focus:border-[#185FA5] outline-none transition-all" maxLength={1} required /> ))}

Didn't receive code? {timer > 0 ? ( 00:{timer < 10 ? `0${timer}` : timer} ) : ( )}

); }