From af1594f375d10142b277c44a1272c3fc43caf782 Mon Sep 17 00:00:00 2001
From: rui hildt <ruihildt@protonmail.com>
Date: Wed, 22 Jul 2020 17:16:49 +0200
Subject: [PATCH] Implement search box with autocomplete

---
 src/components/App.tsx       |  2 ++
 src/components/Header.tsx    |  2 +-
 src/components/SearchBox.tsx | 36 ++++++++++++++++++++++++++++++++++++
 3 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 src/components/SearchBox.tsx

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 2954317..0fd7ff2 100644
--- a/src/components/App.tsx
+++ b/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>
 	);
 }
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index c5195cc..5ed886e 100644
--- a/src/components/Header.tsx
+++ b/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'
diff --git a/src/components/SearchBox.tsx b/src/components/SearchBox.tsx
new file mode 100644
index 0000000..da230c3
--- /dev/null
+++ b/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>
+	);
+};