33 lines
734 B
TypeScript
33 lines
734 B
TypeScript
import React from 'react';
|
|
import { Box, TextInput } from 'grommet';
|
|
import { FormSearch } from 'grommet-icons';
|
|
|
|
export const Search = ({
|
|
inputValue,
|
|
handleChange,
|
|
suggestions,
|
|
handleSelect,
|
|
}: {
|
|
inputValue: string;
|
|
handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
suggestions: string[] | undefined;
|
|
handleSelect: (x: { target: HTMLElement | null; suggestion: any }) => void;
|
|
}) => (
|
|
<Box
|
|
as='section'
|
|
direction='row'
|
|
justify='center'
|
|
margin={{ vertical: 'large' }}
|
|
>
|
|
<TextInput
|
|
value={inputValue}
|
|
onChange={handleChange}
|
|
onSelect={handleSelect}
|
|
placeholder='Type an artist name'
|
|
icon={<FormSearch color='plain' />}
|
|
dropHeight='large'
|
|
suggestions={suggestions}
|
|
/>
|
|
</Box>
|
|
);
|