30 lines
1020 B
JavaScript
30 lines
1020 B
JavaScript
function OTPForm({ index, value, onChange, inputRef, isError }) {
|
|
return (
|
|
<input
|
|
type="tel"
|
|
value={value}
|
|
maxLength={1}
|
|
ref={inputRef}
|
|
onChange={(e) => {
|
|
const val = e.target.value;
|
|
if (/^\d?$/.test(val)) {
|
|
onChange(index, val);
|
|
}
|
|
}}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Backspace" && !e.target.value) {
|
|
onChange(index, "backspace");
|
|
}
|
|
}}
|
|
className={`border otp-field 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] bg-transparent text-[#525252]
|
|
w-[43px] h-[43px] sm:w-[45px] sm:h-[45px] md:w-[47px] md:h-[47px] lg:w-[48px] lg:h-[48px]
|
|
${value && "!border-[1px] !border-solid !border-[#5559CE]"}
|
|
${isError && "!border-[#d32f2f]"}`}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export default OTPForm;
|