diff options
author | August Skare <post@augustskare.no> | 2018-10-18 19:28:44 +0800 |
---|---|---|
committer | August Skare <post@augustskare.no> | 2018-10-18 19:28:44 +0800 |
commit | b158a6d7226fb50ecedcc07da8ef30e5e5690e46 (patch) | |
tree | 3cab0f55e7f8961be4f6ecc49f5a3f503cd21bc9 /packages/dev-tools-pages/ts/components/ContentBlock.tsx | |
parent | c616b53c9c95edcc9da34aaaee3b91f5f1787636 (diff) | |
download | dexon-sol-tools-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.tar dexon-sol-tools-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.tar.gz dexon-sol-tools-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.tar.bz2 dexon-sol-tools-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.tar.lz dexon-sol-tools-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.tar.xz dexon-sol-tools-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.tar.zst dexon-sol-tools-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.zip |
initial commit
Diffstat (limited to 'packages/dev-tools-pages/ts/components/ContentBlock.tsx')
-rw-r--r-- | packages/dev-tools-pages/ts/components/ContentBlock.tsx | 47 |
1 files changed, 47 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..56d52a150 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/ContentBlock.tsx @@ -0,0 +1,47 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { Beta } from './Typography'; + +const Base = styled.div` + display: flex; + align-items: flex-start; + justify-content: space-between; + &:not(:last-of-type) { + margin-bottom: 6.25rem; + } +`; + +const Content = styled.div` + width: 66.693548387%; +`; + +const Item = styled.div` + p { + max-width: 31.25rem; + } + + &:not(:last-of-type) { + margin-bottom: 2.5rem; + } +`; + +interface ContentBlockProps { + title: string; + children: React.ReactNode; +} + +function ContentBlock(props: ContentBlockProps) { + const children = React.Children.map(props.children, child => { + return <Item>{child}</Item>; + }); + + return ( + <Base> + <Beta>{props.title}</Beta> + <Content>{children}</Content> + </Base> + ); +} + +export default ContentBlock; |