@axeptio/design-system/build/src/Core/Layout/Container/index.jsx

Design System for Axeptio

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const Root = styled.div`
  z-index: 100;
  position: relative;
  margin: auto;
  max-width: ${props => props.theme.container.xxlarge}px;

  ${props =>
    !props.noPadding &&
    `
    padding: 0 30px;
  `};

  @media (min-width: ${props => props.theme.breakpoints.xxlarge}px) {
    padding: 0;
  }

  ${props =>
    props.maxWidth === 'small' &&
    `
    max-width: ${props.theme.container.small}px;
  
    @media (min-width: ${props.theme.breakpoints.small}px) {
      padding: 0;
    }
  `};

  ${props =>
    props.maxWidth === 'medium' &&
    `
    max-width: ${props.theme.container.medium}px;
  
    @media (min-width: ${props.theme.breakpoints.medium}px) {
      padding: 0;
    }
  `};

  ${props =>
    props.maxWidth === 'large' &&
    `
    max-width: ${props.theme.container.large}px;

    @media (min-width: ${props.theme.breakpoints.large}px) {
      padding: 0;
    }
  `};

  ${props =>
    props.maxWidth === 'xlarge' &&
    `
    max-width: ${props.theme.container.xlarge}px;

    @media (min-width: ${props.theme.breakpoints.xlarge}px) {
      padding: 0;
    }
  `};

  ${props =>
    props.maxWidth === 'xxxlarge' &&
    `
    max-width: ${props.theme.container.xxxlarge}px;

    @media (min-width: ${props.theme.breakpoints.xxxlarge}px) {
      padding: 0;
    }
  `};
`;

const Container = ({ children, noPadding, maxWidth }) => (
  <Root noPadding={noPadding} maxWidth={maxWidth}>
    {children}
  </Root>
);

Container.propTypes = {
  children: PropTypes.any,
  noPadding: PropTypes.bool,
  maxWidth: PropTypes.string
};

export default Container;