diff options
author | Francesco Agosti <francesco.agosti93@gmail.com> | 2019-01-02 22:13:14 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2019-01-02 22:13:14 +0800 |
commit | 1ddf1087dd327b2ef35165518ee91eb457b84174 (patch) | |
tree | 619d5b8afd97945eb7917cb71b74ed1c721a77d3 /packages/website/ts/components/definition.tsx | |
parent | dbbd0c5c9233965713a3ee30a1a0c5eb06448212 (diff) | |
parent | dc6d6024dc7e72d2634c6bbd88886af6cc0ef6fc (diff) | |
download | dexon-sol-tools-1ddf1087dd327b2ef35165518ee91eb457b84174.tar dexon-sol-tools-1ddf1087dd327b2ef35165518ee91eb457b84174.tar.gz dexon-sol-tools-1ddf1087dd327b2ef35165518ee91eb457b84174.tar.bz2 dexon-sol-tools-1ddf1087dd327b2ef35165518ee91eb457b84174.tar.lz dexon-sol-tools-1ddf1087dd327b2ef35165518ee91eb457b84174.tar.xz dexon-sol-tools-1ddf1087dd327b2ef35165518ee91eb457b84174.tar.zst dexon-sol-tools-1ddf1087dd327b2ef35165518ee91eb457b84174.zip |
Merge pull request #1470 from 0xProject/feature/website/0x-org-cleanup
[website] Remove @next dir, remove unused files.
Diffstat (limited to 'packages/website/ts/components/definition.tsx')
-rw-r--r-- | packages/website/ts/components/definition.tsx | 145 |
1 files changed, 145 insertions, 0 deletions
diff --git a/packages/website/ts/components/definition.tsx b/packages/website/ts/components/definition.tsx new file mode 100644 index 000000000..c7fac5177 --- /dev/null +++ b/packages/website/ts/components/definition.tsx @@ -0,0 +1,145 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { Button } from 'ts/components/button'; +import { Icon } from 'ts/components/icon'; +import { Heading, Paragraph } from 'ts/components/text'; + +interface Action { + label: string; + url?: string; + onClick?: () => void; + shouldUseAnchorTag?: boolean; +} + +interface Props { + isInline?: boolean; + isInlineIcon?: boolean; + isCentered?: boolean; + isWithMargin?: boolean; + icon: string; + iconSize?: 'medium' | 'large' | number; + fontSize?: 'default' | 'medium' | number; + title: string; + titleSize?: 'small' | 'default' | number; + description: React.ReactNode | string; + actions?: Action[]; +} + +export const Definition = (props: Props) => ( + <Wrap {...props}> + <Icon name={props.icon} size={props.iconSize || 'medium'} margin={[0, 0, 'default', 0]} /> + + <TextWrap {...props}> + <Heading + asElement="h2" + fontWeight="400" + marginBottom={props.titleSize === 'small' ? '7px' : '15px'} + size={props.titleSize || 'default'} + > + {props.title} + </Heading> + + {typeof props.description === 'string' ? ( + <Paragraph isMuted={true} size={props.fontSize || 'default'}> + {props.description} + </Paragraph> + ) : ( + <>{props.description}</> + )} + + {props.actions && ( + <LinkWrap> + {props.actions.map((item, index) => ( + <Button + key={`dlink-${index}`} + href={item.url} + onClick={item.onClick} + isWithArrow={true} + isAccentColor={true} + shouldUseAnchorTag={item.shouldUseAnchorTag} + target="_blank" + > + {item.label} + </Button> + ))} + </LinkWrap> + )} + </TextWrap> + </Wrap> +); + +const Wrap = + styled.div < + Props > + ` + max-width: ${props => props.isInline && '354px'}; + + & + & { + margin-top: ${props => props.isInlineIcon && '120px'}; + margin-top: ${props => props.isWithMargin && '60px'}; + } + + @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 || !props.isCentered) && 'left'}; + } + + @media (max-width: 768px) { + margin: 0 auto; + + & + & { + margin-top: ${props => props.isInline && '60px'}; + } + } +`; + +const TextWrap = + styled.div < + Props > + ` + width: 100%; + max-width: 560px; + + ul { + padding-top: 10px; + padding-left: 1rem; + } + + li { + color: ${props => props.theme.paragraphColor}; + font-size: ${props => `var(--${props.fontSize || 'default'}Paragraph)`}; + font-weight: 300; + list-style: disc; + opacity: 0.75; + line-height: 1.444444444; + margin-bottom: 1rem; + } + + @media (min-width: 768px) { + margin-left: ${props => props.isInlineIcon && '60px'}; + } +`; + +const LinkWrap = styled.div` + margin-top: 60px; + + @media (min-width: 768px) { + display: inline-flex; + + a + a { + margin-left: 60px; + } + } + + @media (max-width: 768px) { + max-width: 250px; + + a + a { + margin-top: 15px; + } + } +`; |