From 689203761e0edb89c78f5dcf8e37ae698c50f940 Mon Sep 17 00:00:00 2001
From: rui hildt <ruihildt@protonmail.com>
Date: Wed, 22 Jul 2020 15:57:37 +0200
Subject: [PATCH] Add header

---
 src/components/App.tsx    | 19 +++++++++++--------
 src/components/Header.tsx | 17 +++++++++++++++++
 2 files changed, 28 insertions(+), 8 deletions(-)
 create mode 100644 src/components/Header.tsx

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 148d52e..2954317 100644
--- a/src/components/App.tsx
+++ b/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>
 	);
 }
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 0000000..c5195cc
--- /dev/null
+++ b/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}
+		/>
+	);
+};