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() {
+
);
}
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 (
{
+ const [value, setValue] = useState('');
+
+ let suggestions = [
+ 'The Doors',
+ 'The Doors With Eddie Vedder',
+ 'The Doorstep Carolers',
+ 'The Doors Experience',
+ 'Darken the Doorstep',
+ ];
+
+ return (
+
+ setValue(event.target.value)}
+ placeholder='Type an artist name'
+ icon={}
+ dropProps={{
+ overflow: 'visible',
+ }}
+ dropHeight='large'
+ suggestions={suggestions}
+ />
+
+ );
+};