Header.jsx

import React from 'react';
import Icon from 'react-fontawesome';
import styled from 'styled-components'

const Container = styled.div`
	display: flex;
	padding: 10px 20px 6px 20px;
	border-bottom: 1px solid ${props => props.theme.border.primary};  <--- akses dengan props.theme
	font-size: 20px;
`

const PageName = styled.h1`
	font-weight: bold;
	font-size: 20px; /* we need this even parent has this same property */
`

const Header = (props) => (
	<Container>
		<PageName>Home</PageName>
		<div className="ml-auto">
			<Icon name="star-half-full" />
		</div>
	</Container>
);

export default Header;