add filter

src/components/input/SearchInput.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { cn } from '../../lib/cn';
+import { iconSearch } from '../../assets/icons/filters';
+
+interface searchInputProps {
+    name?: string;
+    error?: string;
+    disabled?: boolean;
+    required?: boolean;
+    label?: string;
+    placeholder?: string;
+    className?: string;
+    onChange: (state: string) => void;
+    defaultState?: string;
+    autocomplete?: string;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+}
+
+export const SearchInput: React.FC<searchInputProps> = ({
+    placeholder = '',
+    className = '',
+    onChange,
+    defaultState = '',
+    name = '',
+    autocomplete = '',
+    onKeyDown,
+}) => {
+    const [value, setValue] = React.useState<string>(defaultState);
+
+    React.useEffect(() => onChange(value), [value]);
+    React.useEffect(() => setValue(defaultState), [defaultState]);
+
+    return (
+        <label
+            className={cn(
+                'relative bg-liquid-lighter w-[200px] h-[40px] rounded-full px-[16px] pl-[50px] py-[8px] cursor-text',
+                className,
+            )}
+        >
+            <input
+                className={cn(
+                    'placeholder:text-liquid-light w-full bg-transparent outline-none text-liquid-white',
+                )}
+                value={value}
+                name={name}
+                autoComplete={autocomplete}
+                type="text"
+                placeholder={placeholder}
+                onChange={(e) => {
+                    setValue(e.target.value);
+                }}
+                onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
+                    if (onKeyDown) onKeyDown(e);
+                }}
+            />
+            <img src={iconSearch} className=" absolute top-[8px] left-[16px]" />
+        </label>
+    );
+};