import React from 'react';
import { Box, Text, Anchor } from 'grommet';

export const Header = () => {
	return (
		<Box
			as='header'
			direction='row'
			align='center'
			justify='between'
			background='brand'
			pad={{ left: 'medium', right: 'small', vertical: 'small' }}
			style={{ zIndex: 1 }}
		>
			<Text
				margin={{ vertical: 'small' }}
				color='light-1'
				size='xxlarge'
				weight='bold'
			>
				Spoti Search
			</Text>
			<Anchor
					href='https://git.ruihildt.xyz/ruihildt/spoti-search/'
					label='Git Repo'
					color='white'
				/>
		</Box>
	);
};