30 lines
762 B
TypeScript
30 lines
762 B
TypeScript
import styles from './SearchField.module.scss'
|
||
import { Icon } from './Icon'
|
||
import { t } from '../../utils/intl'
|
||
import clsx from 'clsx'
|
||
|
||
type SearchFieldProps = {
|
||
onChange: (value: string) => void
|
||
class?: string
|
||
}
|
||
|
||
export const SearchField = (props: SearchFieldProps) => {
|
||
const handleInputChange = (event) => props.onChange(event.target.value.trim())
|
||
|
||
return (
|
||
<div class={clsx(styles.searchField, props.class)}>
|
||
<label for="search-field">
|
||
<Icon name="search" class={styles.icon} />
|
||
</label>
|
||
<input
|
||
id="search-field"
|
||
type="text"
|
||
class="search-input"
|
||
onInput={handleInputChange}
|
||
placeholder={t('Search')}
|
||
/>
|
||
<label for="search-field">Поиск</label>
|
||
</div>
|
||
)
|
||
}
|