Basic Dashboard Using styled-components

dashboard.styles.jsx

import styled from 'styled-components';

export const Container = styled.div`
	display: grid;
	grid-template-columns: 24rem 1fr;
	grid-template-rows: 5rem 1fr 5rem;
	grid-template-areas:
		'sidebar header'
		'sidebar main'
		'sidebar footer';
	height: 100vh;
	background-color: yellow;
`;

export const Sidebar = styled.aside`
	background-color: pink;
	grid-area: sidebar;
`;

export const Header = styled.header`
	background-color: blue;
	grid-area: header;
`;

export const Main = styled.header`
	background-color: orange;
	grid-area: main;
`;

export const Footer = styled.div`
	background-color: green;
	grid-area: content;
	grid-area: footer;
`;