diff options
Diffstat (limited to 'packages/dev-tools-pages/ts/components/ContentBlock.tsx')
-rw-r--r-- | packages/dev-tools-pages/ts/components/ContentBlock.tsx | 76 |
1 files changed, 76 insertions, 0 deletions
diff --git a/packages/dev-tools-pages/ts/components/ContentBlock.tsx b/packages/dev-tools-pages/ts/components/ContentBlock.tsx new file mode 100644 index 000000000..c54930902 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/ContentBlock.tsx @@ -0,0 +1,76 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { withContext, Props } from './withContext'; +import { Beta, Alpha } from './Typography'; +import { media } from 'ts/variables'; + +const Base = styled.div` + display: flex; + align-items: flex-start; + justify-content: space-between; + :not(:last-of-type) { + margin-bottom: 6.25rem; + } + ${Beta} { + margin-bottom: 2.5rem; + } + ${media.small` + display: block; + :not(:last-of-type) { + margin-bottom: 3.125rem; + } + `}; +`; + +const Content = styled.div` + width: 66.693548387%; + ${media.small` + width: 100%; + `}; +`; + +const Item = styled.div` + p { + max-width: 31.25rem; + } + + &:not(:last-of-type) { + margin-bottom: 2.5rem; + ${media.small` + margin-bottom: 1.875rem; + `}; + } +`; + +const StyledTitle = styled(Alpha)` + color: ${props => props.color}; + ${media.small` + & + div { + margin-top: 1.5rem; + } + `}; +`; + +interface ContentBlockProps extends Props { + title: string; + main?: boolean; + children?: React.ReactNode; +} + +function ContentBlock(props: ContentBlockProps) { + const children = React.Children.map(props.children, child => { + return <Item>{child}</Item>; + }); + + const Title = props.main ? StyledTitle : Beta; + + return ( + <Base> + <Title color={props.colors.type}>{props.title}</Title> + {children ? <Content>{children}</Content> : null} + </Base> + ); +} + +export default withContext(ContentBlock); |