Add header

src/components/App.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Grommet } from 'grommet';
+import { Header } from './Header';
 
 const theme = {
 	global: {
@@ -14,7 +15,9 @@ const theme = {
 function App() {
 	return (
 		<Grommet theme={theme}>
+			<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}
+		/>
+	);
+};