buy service and discount and text + ...

src/components/Input.tsx

@@ -1,4 +1,4 @@
-import { FC, InputHTMLAttributes, useState } from 'react'
+import { FC, InputHTMLAttributes, useEffect, useState } from 'react'
 import { clx } from '../helpers/utils';
 import EyeIcon from '../assets/images/eye.svg'
 import { SearchNormal } from 'iconsax-react';
@@ -15,11 +15,22 @@ type Props = {
     unit?: string;
     seprator?: boolean;
     isNotRequired?: boolean;
+    onChangeSearchFinal?: (value: string) => void;
 } & InputHTMLAttributes<HTMLInputElement>
 
 const Input: FC<Props> = (props: Props) => {
 
     const [showPassword, setShowPassword] = useState<boolean>(false)
+    const [search, setSearch] = useState<string>('')
+
+    useEffect(() => {
+        if (props.variant === 'search' && props.onChangeSearchFinal) {
+            const timeout = setTimeout(() => {
+                props.onChangeSearchFinal?.(search)
+            }, 1000)
+            return () => clearTimeout(timeout)
+        }
+    }, [search, props])
 
     const inputClass = clx(
         'w-full h-10 text-black block px-4 text-xs rounded-xl border border-border',
@@ -36,7 +47,10 @@ const Input: FC<Props> = (props: Props) => {
             </label>
 
             <div className='w-full relative mt-1'>
-                <input {...props} type={props.type === 'password' && showPassword ? 'text' : props.type === 'password' ? 'password' : undefined} className={inputClass} />
+                <input {...props} onChange={(e) => {
+                    setSearch(e.target.value)
+                    props.onChange?.(e)
+                }} type={props.type === 'password' && showPassword ? 'text' : props.type === 'password' ? 'password' : undefined} className={inputClass} />
 
                 {
                     props.type === 'password' &&