header

src/components/Input.tsx

@@ -1,11 +1,12 @@
 import { FC, InputHTMLAttributes, useState } from 'react'
 import { clx } from '../helpers/utils';
 import EyeIcon from '../assets/images/eye.svg'
+import { SearchNormal } from 'iconsax-react';
 
 type Variant = "floating_outlined" | "primary" | "search";
 
 type Props = {
-    label: string;
+    label?: string;
     className?: string;
     variant?: Variant;
     error_text?: string;
@@ -22,6 +23,7 @@ const Input: FC<Props> = (props: Props) => {
     const inputClass = clx(
         'w-full h-10 text-black block px-4 text-xs rounded-xl mt-1 border border-border',
         props.readOnly && 'bg-gray-100',
+        props.variant === 'search' && 'bg-[#EEF0F7] border-0 ps-10',
         props.className
     );
 
@@ -39,6 +41,11 @@ const Input: FC<Props> = (props: Props) => {
                     props.type === 'password' &&
                     <img onClick={() => setShowPassword((oldValue) => !oldValue)} src={EyeIcon} className='w-5 absolute top-0 bottom-0 cursor-pointer my-auto left-3' />
                 }
+
+                {
+                    props.variant === 'search' &&
+                    <SearchNormal size={20} color='#8C90A3' className='absolute top-0 w-5 bottom-0 my-auto right-3' />
+                }
             </div>
         </div>
     )