otp auto focus

src/components/auth/OTP.tsx

@@ -1,11 +1,10 @@
 import { useEffect, useState } from "react";
-import { Button, FloatLabelInput } from "..";
+import { Button } from "..";
 import { useLocation, useNavigate } from "react-router-dom";
 import { RouteHandler } from "../../router/routes";
 
 type FormType = {
-  email: string;
-  password: string;
+  [index: string] : string
 };
 
 type HandleChange = {
@@ -17,17 +16,19 @@ export default function Login() {
   const navigate = useNavigate()
   const { state } = useLocation();
 
-  let [formDetails, setFormDetails] = useState<FormType>({
-    email: "",
-    password: "",
+  let [values, setValues] = useState<FormType>({
+    otp1: "",
+    otp2: "",
+    otp3: "",
+    otp4: "",
   });
 
-  const handleFormChange = ({
+  const handleChange = ({
     target: { name, value },
   }: {
     target: HandleChange;
   }): any => {
-    setFormDetails((prev) => ({ ...prev, [name]: value }));
+    setValues((prev:FormType) => ({ ...prev, [name]: value }));
   };
 
   const handleSubmit = () => {
@@ -42,10 +43,20 @@ export default function Login() {
     }
   }, []);
 
+  useEffect(()=>{
+    const formOTP = document.querySelectorAll('input')
+    for (const i of formOTP) {
+      if (i.value === '') {
+        i.focus();
+        break;
+      }
+    }
+  },[values])
+
   return (
     <div className={`w-full overflow-y-auto bg-top bg-cover`}>
       <div className="w-full flex justify-center">
-        <div className="w-full md:max-w-[570px]">
+        <div className="w-full xs:max-w-[350px] md:max-w-[570px]">
           <div className="bg-white w-full rounded-2xl border-2 border-black">
             <div className="w-full p-5 sm:p-10 lg:p-20 flex flex-col justify-between items-center">
               <div className="mb-4">
@@ -59,55 +70,47 @@ export default function Login() {
 
               <div className="w-full sm:w-4/5">
                 {/* INPUTS */}
-                <div className="w-full flex justify-between gap-8">
-                  <div className="relative my-2 py-2">
-                    <FloatLabelInput
-                      id="email"
-                      name="email"
-                      type="email"
-                    //   placeHolder="Email"
-                    //   labelName="Email"
-                      value={formDetails.email}
-                      inputClass=""
-                      onChange={handleFormChange}
-                    />
-                  </div>
-                  <div className="relative my-2 py-2">
-                    <FloatLabelInput
-                      id="password"
-                      name="password"
-                      type="password"
-                    //   placeHolder="Password"
-                    //   labelName="Password"
-                      value={formDetails.password}
-                      inputClass=""
-                      onChange={handleFormChange}
-                    />
-                  </div>
-                  <div className="relative my-2 py-2">
-                    <FloatLabelInput
-                      id="passwor"
-                      name="passwor"
-                      type="password"
-                    //   placeHolder="Password"
-                    //   labelName="Password"
-                      value={formDetails.password}
-                      inputClass=""
-                      onChange={handleFormChange}
-                    />
-                  </div>
-                  <div className="relative my-2 py-2">
-                    <FloatLabelInput
-                      id="passw"
-                      name="passw"
-                      type="password"
-                    //   placeHolder="Password"
-                    //   labelName="Password"
-                      value={formDetails.password}
-                      inputClass=""
-                      onChange={handleFormChange}
-                    />
-                  </div>
+                <div className="w-full flex justify-between gap-4">
+                  <input
+                      id='otp1'
+                      name='otp1'
+                      className={`custom-otp text-center w-12 h-12 outline-none border-b-2 border-b-[#5A2C82] placeholder:text-transparent transition-all duration-500`}
+                      type='text'
+                      placeholder=''
+                      value={values.otp1}
+                      onChange={handleChange}
+                      maxLength={1}
+                  />
+                  <input
+                      id='otp2'
+                      name='otp2'
+                      className={`custom-otp text-center w-12 h-12 outline-none border-b-2 border-b-[#5A2C82] placeholder:text-transparent transition-all duration-500`}
+                      type='text'
+                      placeholder=''
+                      value={values.otp2}
+                      onChange={handleChange}
+                      maxLength={1}
+                  />
+                  <input
+                      id='otp3'
+                      name='otp3'
+                      className={`custom-otp text-center w-12 h-12 outline-none border-b-2 border-b-[#5A2C82] placeholder:text-transparent transition-all duration-500`}
+                      type='text'
+                      placeholder=''
+                      value={values.otp3}
+                      onChange={handleChange}
+                      maxLength={1}
+                  />
+                  <input
+                      id='otp4'
+                      name='otp4'
+                      className={`custom-otp text-center w-12 h-12 outline-none border-b-2 border-b-[#5A2C82] placeholder:text-transparent transition-all duration-500`}
+                      type='text'
+                      placeholder=''
+                      value={values.otp4}
+                      onChange={handleChange}
+                      maxLength={1}
+                  />
                 </div>
 
                 <div className="mt-10 w-full">

tailwind.config.js

@@ -5,7 +5,11 @@ export default {
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      screens:{
+        xs: "400px",
+      }
+    },
   },
   plugins: [],
 }