feat: add input validation error

src/features/auth/components/StepEnterOtp.tsx

@@ -2,7 +2,7 @@ import Button from '@/components/button/PrimaryButton';
 import OTPInputField from '@/components/input/MultiInputField';
 import { AUTH_PAGE_ELEMENT, AUTH_PAGE_ELEMENT as AUTH_PAGE_ELEMENTS } from '@/enums';
 import Image from 'next/image';
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 
 type Props = {
     onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) & React.ChangeEventHandler<HTMLInputElement>;
@@ -11,9 +11,23 @@ type Props = {
     phoneNumber: string;
     timerRunning: boolean;
     secondsLeft: number;
-}
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'>
 
-function StepEnterOtp({ onChange, onClick, value, phoneNumber, timerRunning, secondsLeft }: Props) {
+function StepEnterOtp({ onChange, onClick, disabled = false, value, phoneNumber, timerRunning, secondsLeft }: Props) {
+    const [error, setError] = useState('');
+
+    const hasError = (e = error) => {
+        return e.trim().length > 0
+    }
+
+    useEffect(() => {
+        let error = '';
+        if (!/^\d{6}$/.test(value)) {
+            error = 'عبارت کامل نیست';
+        }
+
+        setError(error);
+    }, [value])
 
     return (
         <>
@@ -61,7 +75,7 @@ function StepEnterOtp({ onChange, onClick, value, phoneNumber, timerRunning, sec
                         }
                     </div>
                 </div>
-                <Button type='submit'>بعدی</Button>
+                <Button disabled={disabled || hasError() || value.length <= 0} type='submit'>بعدی</Button>
             </div>
         </>
     )