2022-11-11 03:31:54 +01:00
|
|
|
import React, { ChangeEvent, ReactElement } from 'react'
|
2019-11-15 22:10:53 +01:00
|
|
|
import Icon from '../../atoms/Icon'
|
2023-01-29 22:58:19 +01:00
|
|
|
import Input from '../../atoms/Input'
|
2022-11-11 03:31:54 +01:00
|
|
|
import * as styles from './SearchInput.module.css'
|
2019-10-02 13:35:50 +02:00
|
|
|
|
|
|
|
export default function SearchInput({
|
|
|
|
value,
|
|
|
|
onToggle,
|
|
|
|
onChange
|
|
|
|
}: {
|
|
|
|
value: string
|
|
|
|
onToggle(): void
|
2022-11-11 03:31:54 +01:00
|
|
|
onChange(e: ChangeEvent<HTMLInputElement>): void
|
2020-05-22 14:38:19 +02:00
|
|
|
}): ReactElement {
|
2019-10-02 13:35:50 +02:00
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<Input
|
2022-11-11 03:31:54 +01:00
|
|
|
className={styles.searchInput}
|
2019-10-02 13:35:50 +02:00
|
|
|
type="search"
|
|
|
|
placeholder="Search everything"
|
|
|
|
autoFocus // eslint-disable-line
|
|
|
|
value={value}
|
|
|
|
onChange={onChange}
|
|
|
|
/>
|
|
|
|
<button
|
2022-11-11 03:31:54 +01:00
|
|
|
className={styles.searchInputClose}
|
2019-10-02 13:35:50 +02:00
|
|
|
onClick={onToggle}
|
|
|
|
title="Close search"
|
|
|
|
>
|
2019-11-15 22:10:53 +01:00
|
|
|
<Icon name="X" />
|
2019-10-02 13:35:50 +02:00
|
|
|
</button>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|