44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
import { MagnifyingGlassIcon, XIcon } from '@phosphor-icons/react';
|
|
import { Button } from './button';
|
|
import { InputGroup, InputGroupAddon, InputGroupInput } from './input-group';
|
|
|
|
type SearchInputProps = {
|
|
keywords: string;
|
|
setKeyword: (value: string) => void;
|
|
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
};
|
|
|
|
const SearchInput = ({ keywords, setKeyword, onChange }: SearchInputProps) => {
|
|
const onClearSearch = () => {
|
|
setKeyword('');
|
|
};
|
|
|
|
return (
|
|
<InputGroup className="w-70 bg-white">
|
|
<InputGroupInput
|
|
id="keywords"
|
|
placeholder="Search...."
|
|
value={keywords}
|
|
onChange={onChange}
|
|
/>
|
|
<InputGroupAddon>
|
|
<MagnifyingGlassIcon />
|
|
</InputGroupAddon>
|
|
<InputGroupAddon align="inline-end">
|
|
{keywords !== '' && (
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
className="rounded-full"
|
|
onClick={onClearSearch}
|
|
>
|
|
<XIcon />
|
|
</Button>
|
|
)}
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
);
|
|
};
|
|
|
|
export default SearchInput;
|