1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
3x
 
import styles from './search.module.css';
 
type Props = {
    disabled?: boolean;
    placeHolderText?: string;
    value?: string;
    onBlur?: () => void;
    onChange?: () => void;
};
 
/**
 * @example
 *     <SearchInput />;
 *
 * @param {string} value - The value of the input
 * @param {boolean} disabled - If true, the input will be disabled
 * @param {Function} onBlur - Callback function when input is blurred
 * @param {Function} onChange - Callback function when input is changed
 * @param {string} placeHolderText - The placeholder text for the input
 * @returns {JSX.Element}
 */
const SearchInput = ({ value, disabled, onBlur, onChange, placeHolderText = 'Search' }: Props) => {
    return (
        <input
            type="text"
            data-testid="search-input"
            value={value}
            onBlur={onBlur}
            onChange={onChange}
            className={styles.input}
            disabled={disabled}
            placeholder={placeHolderText}
        />
    );
};
export default SearchInput;