diff options
author | August Skare <post@augustskare.no> | 2018-10-22 19:14:48 +0800 |
---|---|---|
committer | August Skare <post@augustskare.no> | 2018-10-22 19:27:49 +0800 |
commit | e485a9814333a3178e6a156230ed15b047f11005 (patch) | |
tree | e5a2ff7a5675986b7a947d5d75842e07b7587e52 /packages/dev-tools-pages/ts/components/Main.tsx | |
parent | 1e29f2875d2428e9f4df630850391d27be874360 (diff) | |
download | dexon-sol-tools-e485a9814333a3178e6a156230ed15b047f11005.tar dexon-sol-tools-e485a9814333a3178e6a156230ed15b047f11005.tar.gz dexon-sol-tools-e485a9814333a3178e6a156230ed15b047f11005.tar.bz2 dexon-sol-tools-e485a9814333a3178e6a156230ed15b047f11005.tar.lz dexon-sol-tools-e485a9814333a3178e6a156230ed15b047f11005.tar.xz dexon-sol-tools-e485a9814333a3178e6a156230ed15b047f11005.tar.zst dexon-sol-tools-e485a9814333a3178e6a156230ed15b047f11005.zip |
support dark alternative of Main component
Diffstat (limited to 'packages/dev-tools-pages/ts/components/Main.tsx')
-rw-r--r-- | packages/dev-tools-pages/ts/components/Main.tsx | 43 |
1 files changed, 27 insertions, 16 deletions
diff --git a/packages/dev-tools-pages/ts/components/Main.tsx b/packages/dev-tools-pages/ts/components/Main.tsx index 8046abc91..6c0270dbc 100644 --- a/packages/dev-tools-pages/ts/components/Main.tsx +++ b/packages/dev-tools-pages/ts/components/Main.tsx @@ -1,33 +1,44 @@ import * as React from 'react'; import styled from 'styled-components'; -import { withContext, Props } from './withContext'; +import { Beta } from './Typography'; +import Container from './Container'; +import ContentBlock from './ContentBlock'; -import { Alpha } from './Typography'; - -const StyledMain = styled.div` +const StyledMain = + styled.div < + MainProps > + ` padding-top: 6.25rem; padding-bottom: 6.25rem; + ${props => + props.dark + ? ` + background-color: #000; + color: #fff; + ` + : ''}; `; -const Title = styled(Alpha)` - color: ${props => props.color}; - margin-bottom: 6.25rem; -`; - -interface MainProps extends Props { +interface MainProps { + title?: string; + subtitle?: string; + dark?: boolean; children: React.ReactNode; } function Main(props: MainProps) { return ( - <StyledMain> - <Title as="h2" color={props.colors.main}> - Get started - </Title> - {props.children} + <StyledMain dark={props.dark}> + <Container> + <ContentBlock main title={props.title || 'Get started'}> + {props.subtitle ? <Beta as="p">{props.subtitle}</Beta> : null} + </ContentBlock> + + {props.children} + </Container> </StyledMain> ); } -export default withContext(Main); +export default Main; |