packages/website/ts/@next/components/container.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

import * as React from 'react';
import styled from 'styled-components';

interface ContainerProps {
  bgColor?: string;
  removePadding?: boolean;
}

const StyledContainer = styled.div<ContainerProps>`
    background-color: ${props => props.bgColor || 'transparent'};
    max-width: 111.111111111rem; // 2000px
    margin: 0 auto;
    padding: 0 1.666666667rem; // 30px

    ${props => props.removePadding && `padding: 0;`}
`;

export const Container: React.StatelessComponent<ContainerProps> = props => {
  const { children } = props;

  return (
    <StyledContainer {...props}>
      {children}
    </StyledContainer>
  );
};