diff options
author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-12 16:47:55 +0800 |
---|---|---|
committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-12 20:32:20 +0800 |
commit | c5db8f25d31d45ac3ff9fff78f7e1fde348d81d4 (patch) | |
tree | 0ec31d48290d5bb84d833cf70e51c0886b8dffdf /packages/website/ts/@next/components/definition.tsx | |
parent | 965b1ff32fac0eaf91731b9f6b3d0a9ce94e6bb9 (diff) | |
download | dexon-0x-contracts-c5db8f25d31d45ac3ff9fff78f7e1fde348d81d4.tar dexon-0x-contracts-c5db8f25d31d45ac3ff9fff78f7e1fde348d81d4.tar.gz dexon-0x-contracts-c5db8f25d31d45ac3ff9fff78f7e1fde348d81d4.tar.bz2 dexon-0x-contracts-c5db8f25d31d45ac3ff9fff78f7e1fde348d81d4.tar.lz dexon-0x-contracts-c5db8f25d31d45ac3ff9fff78f7e1fde348d81d4.tar.xz dexon-0x-contracts-c5db8f25d31d45ac3ff9fff78f7e1fde348d81d4.tar.zst dexon-0x-contracts-c5db8f25d31d45ac3ff9fff78f7e1fde348d81d4.zip |
WIP
Diffstat (limited to 'packages/website/ts/@next/components/definition.tsx')
-rw-r--r-- | packages/website/ts/@next/components/definition.tsx | 106 |
1 files changed, 106 insertions, 0 deletions
diff --git a/packages/website/ts/@next/components/definition.tsx b/packages/website/ts/@next/components/definition.tsx new file mode 100644 index 000000000..88ef6acdc --- /dev/null +++ b/packages/website/ts/@next/components/definition.tsx @@ -0,0 +1,106 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import {Link} from 'ts/@next/components/button'; +import { Icon } from 'ts/@next/components/icon'; + +interface Action { + label: string; + url: string; +} + +interface Props { + isInline?: boolean; + isInlineIcon?: boolean; + isCentered?: boolean; + isWithMargin?: boolean; + iconSize?: 'medium' | 'large' | number; + title: string; + description: React.Node; + actions?: Action[]; +} + +export const Definition = (props: Props) => ( + <Wrap isWithMargin={props.isWithMargin} isInline={props.isInline} isInlineIcon={props.isInlineIcon}> + <Icon + name="ready-to-build" + size={props.iconSize || 'medium'} + margin={[0, 0, 'default', 0]} + /> + + <TextWrap> + <Title> + {props.title} + </Title> + + <Paragraph> + {props.description} + </Paragraph> + + {props.actions && + <LinkWrap> + {props.actions.map((item, index) => ( + <Link + href={item.url} + isWithArrow={true} + isTransparent={true} + isNoBorder={true} + isAccentColor={true} + > + {item.label} + </Link> + ))} + </LinkWrap> + } + </TextWrap> + </Wrap> +); + +const Wrap = styled.div` + max-width: ${props => props.isInline && '354px'}; + + & + & { + margin-top: ${props => (props.isWithMargin && !props.isInlineIcon) ? '60px' : '120px'}; + } + + @media (min-width: 768px) { + width: ${props => props.isInline ? 'calc(33.3333% - 30px)' : '100%'}; + display: ${props => props.isInlineIcon && 'flex'}; + justify-content: ${props => props.isInlineIcon && 'space-between'}; + align-items: ${props => props.isInlineIcon && 'center'}; + text-align: ${props => props.isInlineIcon && 'left'}; + } + + @media (max-width: 768px) { + margin: 0 auto; + + & + & { + margin-top: ${props => props.isInline && '60px'}; + } + } +`; + +const TextWrap = styled.div` + width: 100%; + max-width: 560px; +`; + +const Title = styled.h2` + font-size: 20px; + line-height: 1.3; + margin-bottom: 15px; +`; + +const Paragraph = styled.p` + font-size: 17px; + opacity: 0.75; +`; + +const LinkWrap = styled.div` + display: inline-flex; + margin-top: 60px; + + a + a { + margin-left: 60px; + } +`; |