31 lines
1.0 KiB
JavaScript
31 lines
1.0 KiB
JavaScript
import { useState } from "react"
|
|
|
|
function OTPForm({ handleOTP }) {
|
|
|
|
const [code, setCode] = useState('');
|
|
|
|
return (
|
|
<input
|
|
value={code}
|
|
onChange={e => {
|
|
const value = e.target.value
|
|
|
|
if (/^\d+$/.test(value) && value.length < 2) {
|
|
setCode(value)
|
|
handleOTP(e)
|
|
} else {
|
|
setCode('')
|
|
e.target.value = ''
|
|
}
|
|
}}
|
|
className={`border border-solid border-[#ADB5BD] rounded-[6px] text-center transition-all duration-500 ease-out
|
|
outline-none focus:!border-[1px] focus:!border-solid focus:!border-[#5559CE]
|
|
focus:!outline-[1px] focus:!outline-solid focus:!outline-[#5559CE]
|
|
w-[43px] h-[43px] sm:w-[45px] sm:h-[45px] md:w-[47px] md:h-[47px] lg:w-[48px] lg:h-[48px]
|
|
${code && '!border-[1px] !border-solid !border-[#5559CE]'}
|
|
`}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default OTPForm |