37 lines
755 B
TypeScript
37 lines
755 B
TypeScript
import React, { useState } from 'react';
|
|
import { Box, TextInput } from 'grommet';
|
|
import { FormSearch } from 'grommet-icons';
|
|
|
|
export const SearchBox = () => {
|
|
const [value, setValue] = useState('');
|
|
|
|
let suggestions = [
|
|
'The Doors',
|
|
'The Doors With Eddie Vedder',
|
|
'The Doorstep Carolers',
|
|
'The Doors Experience',
|
|
'Darken the Doorstep',
|
|
];
|
|
|
|
return (
|
|
<Box
|
|
as='section'
|
|
direction='row'
|
|
justify='center'
|
|
margin={{ vertical: 'large' }}
|
|
>
|
|
<TextInput
|
|
value={value}
|
|
onChange={(event) => setValue(event.target.value)}
|
|
placeholder='Type an artist name'
|
|
icon={<FormSearch color='plain' />}
|
|
dropProps={{
|
|
overflow: 'visible',
|
|
}}
|
|
dropHeight='large'
|
|
suggestions={suggestions}
|
|
/>
|
|
</Box>
|
|
);
|
|
};
|