refactor otp field

ui/snippets/auth/fields/AuthModalFieldOtpCode.tsx

@@ -4,12 +4,14 @@ import { useController, useFormContext } from 'react-hook-form';
 
 import type { OtpCodeFormFields } from '../types';
 
+const CODE_LENGTH = 6;
+
 const AuthModalFieldOtpCode = () => {
   const { control } = useFormContext<OtpCodeFormFields>();
   const { field, fieldState, formState } = useController<OtpCodeFormFields, 'code'>({
     control,
     name: 'code',
-    rules: { required: true, minLength: 6, maxLength: 6 },
+    rules: { required: true, minLength: CODE_LENGTH, maxLength: CODE_LENGTH },
   });
 
   const isDisabled = formState.isSubmitting;
@@ -17,13 +19,10 @@ const AuthModalFieldOtpCode = () => {
   return (
     <>
       <HStack>
-        <PinInput otp placeholder="-" { ...field } isDisabled={ isDisabled } isInvalid={ Boolean(fieldState.error) }>
-          <PinInputField borderRadius="base"/>
-          <PinInputField borderRadius="base"/>
-          <PinInputField borderRadius="base"/>
-          <PinInputField borderRadius="base"/>
-          <PinInputField borderRadius="base"/>
-          <PinInputField borderRadius="base"/>
+        <PinInput otp placeholder="" { ...field } isDisabled={ isDisabled } isInvalid={ Boolean(fieldState.error) }>
+          { Array.from({ length: CODE_LENGTH }).map((_, index) => (
+            <PinInputField key={ index } borderRadius="base" borderWidth="2px"/>
+          )) }
         </PinInput>
       </HStack>
       { fieldState.error?.message && <Text color="error" fontSize="xs" mt={ 1 }>{ fieldState.error.message }</Text> }