Add header

src/components/App.tsx

@@ -1,20 +1,23 @@
 import React from 'react';
 import { Grommet } from 'grommet';
+import { Header } from './Header';
 
 const theme = {
-  global: {
-    font: {
-      family: 'Roboto',
-      size: '18px',
-      height: '20px',
-    },
-  },
+	global: {
+		font: {
+			family: 'Roboto',
+			size: '18px',
+			height: '20px',
+		},
+	},
 };
 
 function App() {
 	return (
 		<Grommet theme={theme}>
-			<h1>Spoti Search</h1>
+			<Header>
+				<h1>Spoti Search</h1>
+			</Header>
 		</Grommet>
 	);
 }

src/components/Header.tsx

@@ -0,0 +1,17 @@
+import React, { PropsWithChildren } from 'react';
+import { Box } from 'grommet';
+
+export const Header = (props: PropsWithChildren<{}>) => {
+	return (
+		<Box
+			tag='header'
+			direction='row'
+			align='center'
+			justify='center'
+			background='brand'
+			pad={{ left: 'medium', right: 'small', vertical: 'small' }}
+			style={{ zIndex: 1 }}
+			{...props}
+		/>
+	);
+};