handle register and poster and fix bugs

components/register/element/OTPForm.js

@@ -1,28 +1,26 @@
-import { useState } from "react";
-
-function OTPForm({ handleOTP }) {
-  const [code, setCode] = useState("");
-
+function OTPForm({ index, value, onChange, inputRef, isError }) {
   return (
     <input
-      value={code}
+      ref={inputRef}
+      value={value}
+      maxLength={1}
       onChange={(e) => {
-        const value = e.target.value;
-
-        if (/^\d+$/.test(value) && value.length < 2) {
-          setCode(value);
-          handleOTP(e);
-        } else {
-          setCode("");
-          e.target.value = "";
+        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] 
-            ${code && "!border-[1px] !border-solid !border-[#5559CE]"}
-            `}
+        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]"}`}
     />
   );
 }