Implement search box with autocomplete

src/components/App.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Grommet } from 'grommet';
 import { Header } from './Header';
+import { SearchBox } from './SearchBox';
 
 const theme = {
 	global: {
@@ -18,6 +19,7 @@ function App() {
 			<Header>
 				<h1>Spoti Search</h1>
 			</Header>
+			<SearchBox />
 		</Grommet>
 	);
 }

src/components/Header.tsx

@@ -4,7 +4,7 @@ import { Box } from 'grommet';
 export const Header = (props: PropsWithChildren<{}>) => {
 	return (
 		<Box
-			tag='header'
+			as='header'
 			direction='row'
 			align='center'
 			justify='center'

src/components/SearchBox.tsx

@@ -0,0 +1,36 @@
+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>
+	);
+};