41 lines
1 KiB
TypeScript
41 lines
1 KiB
TypeScript
import { Button, Icon, Input, InputGroup, Stack } from '@chakra-ui/react';
|
|
import { useState } from 'react';
|
|
|
|
export function ListSearch({
|
|
placeholder,
|
|
onSubmit
|
|
}: {
|
|
readonly placeholder?: string;
|
|
readonly onSubmit: (value: string) => void;
|
|
}) {
|
|
const [searchValue, setSearchValue] = useState<string>('');
|
|
return (
|
|
<form
|
|
onSubmit={event => {
|
|
event.preventDefault();
|
|
onSubmit(searchValue);
|
|
}}
|
|
>
|
|
<Stack direction="row">
|
|
<InputGroup
|
|
flex="1"
|
|
startElement={
|
|
<Icon color="colorPalette.500">
|
|
<i className="nf nf-oct-search" />
|
|
</Icon>
|
|
}
|
|
>
|
|
<Input
|
|
value={searchValue}
|
|
onChange={event => setSearchValue(event.currentTarget.value)}
|
|
onSubmit={event => event.preventDefault()}
|
|
placeholder={placeholder}
|
|
/>
|
|
</InputGroup>
|
|
<Button type="submit" border="none">
|
|
Refresh
|
|
</Button>
|
|
</Stack>
|
|
</form>
|
|
);
|
|
}
|