38 lines
876 B
TypeScript
38 lines
876 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: (value: string) => void;
|
|
suggestions: string[];
|
|
handleSelect: (suggestion: string) => void;
|
|
}) => (
|
|
<Box
|
|
as='section'
|
|
direction='row'
|
|
justify='center'
|
|
margin={{ top: 'large' }}
|
|
>
|
|
<Box as='div' margin={{ vertical: 'none' }} width='500px'>
|
|
<TextInput
|
|
type='search'
|
|
name='q'
|
|
value={inputValue}
|
|
suggestions={suggestions}
|
|
onChange={(e) => handleChange(e.target.value)}
|
|
onSelect={(target) => handleSelect(target.suggestion)}
|
|
icon={<FormSearch color='plain' />}
|
|
dropHeight='large'
|
|
placeholder='Type an artist name'
|
|
autoFocus
|
|
aria-label='Search by artist name'
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
); |