React Emotion Page

Page.jsx

import React from 'react';
import styled from '@emotion/styled';

const FlexboxWrapper = styled.div`
  display: flex;
  flex-direction: ${props => props.direction || 'row'};
  align-items: ${props => props.alignItems || 'stretch'};
  justify-content: ${props => props.justifyContent || 'flex-start'};
`;

const FlexItem = styled.div`
  flex: ${props => props.flex};
  align-self: ${props => props.alignSelf};
  order: ${props => props.order};
  flex-basis: ${props => props.flexBasis};
  flex-grow: ${props => props.flexGrow};
  flex-shrink: ${props => props.flexShrink};
`;

const Page = () => (
  <FlexboxWrapper direction="column" justifyContent="space-between" alignItems="stretch">
    <Header flex="0 0 80px">
      <FlexboxWrapper alignItems="center">
        <FlexItem alignSelf="center">Home</FlexItem>
        <FlexItem alignSelf="center">About</FlexItem>
        <FlexItem alignSelf="center">Contact</FlexItem>
      </FlexboxWrapper>
    </Header>
    <Sidebar flex="0 0 200px">Sidebar</Sidebar>
    <MainContent flexGrow={1}>
      Main Content
      <Marketing flex="0 0 200px">Marketing Lorem Ipsum</Marketing>
    </MainContent>
    <Footer flex="0 0 80px">
      <p>Copyright 2022. All rights reserved.</p>
    </Footer>
  </FlexboxWrapper>
);

export default Page;