selector/src/components/shared/Search/Search.tsx

import './Search.scss';

import CrossIcon from '@assets/images/cross.svg?react';
import SearchIcon from '@assets/images/search.svg?react';

const sparkClassNames = {
  textFieldContainer: 'spark-text-field-container',
  fieldTextWrapper: 'spark-fieldtext-wrapper',
  textField:
    'spark-text-field spark-text-field-outline spark-text-field-size-m spark-text-field-start-slot-1x spark-text-field-end-slot-1x',
  textFieldStartSlot: 'spark-text-field-start-slot',
  input: 'spark-input spark-input-outline spark-input-size-m spark-focus spark-focus-within spark-focus-snap',
  textFieldEndSlot: 'spark-text-field-end-slot',
  iconButton: 'spark-button spark-button-ghost',
  icon: 'spark-icon',
};

type SearchProps = {
  placeholder?: string;
  className?: string;
  value?: string;
  search?: (value: string) => void;
};

export const Search = ({ placeholder, className = '', value = '', search }: SearchProps): JSX.Element => {
  return (
    <div className={`${sparkClassNames.textFieldContainer} ${className}`}>
      <div className={sparkClassNames.fieldTextWrapper}>
        <div className={sparkClassNames.textField}>
          <div className={sparkClassNames.textFieldStartSlot}>
            <SearchIcon className={sparkClassNames.icon}></SearchIcon>
          </div>
          <input
            type="text"
            className={sparkClassNames.input}
            placeholder={placeholder}
            inputMode="text"
            value={value}
            onChange={(event) => search?.(event.target.value)}
          />
          <div className={sparkClassNames.textFieldEndSlot}>
            {value && (
              <button className={sparkClassNames.iconButton} onClick={() => search?.('')}>
                <CrossIcon className={sparkClassNames.icon} width="10"></CrossIcon>
              </button>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};