{"size": 741, "ext": "js", "max_stars_repo_path": "src/stories/baseStyle/color/components/ColorSection.js", "max_stars_repo_name": "Sansern/component-with-design", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/stories/baseStyle/color/components/ColorSection.js", "max_issues_repo_name": "Sansern/component-with-design", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/stories/baseStyle/color/components/ColorSection.js", "max_forks_repo_name": "Sansern/component-with-design", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 22.4545454545, "max_line_length": 66, "alphanum_fraction": 0.6720647773}
import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import Typography from '../../../../shared/components/Typography';

const Wrapper = styled.div``;

const ColorContainer = styled.div`
  display: flex;
  padding-top: ${({theme}) => theme.spacing[2]};
  padding-bottom: ${({theme}) => theme.spacing[4]};
  flex-wrap: wrap;
`;

const ColorSectionPropTypes = {
  name: PropTypes.string
};

function ColorSection({ name, children  }) {
  return (
    <Wrapper>
      <Typography variant="caption" children={`${name} Color`} />
      <ColorContainer>
        {children}
      </ColorContainer>
    </Wrapper>
  )
}

ColorSection.propTypes = ColorSectionPropTypes;

export default ColorSection;
