diff options
author | Steve Klebanoff <steve@0xproject.com> | 2018-12-20 02:04:41 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-12-20 02:04:41 +0800 |
commit | 97e21106e5a96809e6298999b93833c4645dffba (patch) | |
tree | ed94468ed83f08410f53a09f65506b972be4e5d9 /packages/website/ts/@next/components/blockIconLink.tsx | |
parent | 6e4cb0246ccd46e69feea5a4324f3a5307df9c3f (diff) | |
parent | 125a940560a01305781bfb6754f52fa64669a6f3 (diff) | |
download | dexon-sol-tools-97e21106e5a96809e6298999b93833c4645dffba.tar dexon-sol-tools-97e21106e5a96809e6298999b93833c4645dffba.tar.gz dexon-sol-tools-97e21106e5a96809e6298999b93833c4645dffba.tar.bz2 dexon-sol-tools-97e21106e5a96809e6298999b93833c4645dffba.tar.lz dexon-sol-tools-97e21106e5a96809e6298999b93833c4645dffba.tar.xz dexon-sol-tools-97e21106e5a96809e6298999b93833c4645dffba.tar.zst dexon-sol-tools-97e21106e5a96809e6298999b93833c4645dffba.zip |
Merge pull request #1448 from 0xProject/feature/website/0x-org
[website][react-shared][instant] 0x org
Diffstat (limited to 'packages/website/ts/@next/components/blockIconLink.tsx')
-rw-r--r-- | packages/website/ts/@next/components/blockIconLink.tsx | 80 |
1 files changed, 80 insertions, 0 deletions
diff --git a/packages/website/ts/@next/components/blockIconLink.tsx b/packages/website/ts/@next/components/blockIconLink.tsx new file mode 100644 index 000000000..bdcc5c29d --- /dev/null +++ b/packages/website/ts/@next/components/blockIconLink.tsx @@ -0,0 +1,80 @@ +import * as React from 'react'; +import { withRouter } from 'react-router-dom'; +import styled from 'styled-components'; + +import { Button } from 'ts/@next/components/button'; +import { Icon } from 'ts/@next/components/icon'; + +interface Props { + icon?: string; + iconComponent?: React.ReactNode; + title: string; + linkLabel: string; + linkUrl?: string; + linkAction?: () => void; +} + +class BaseComponent extends React.PureComponent<Props> { + public onClick = (): void => { + const { linkAction, linkUrl } = this.props; + + if (linkAction) { + linkAction(); + } else { + this.props.history.push(linkUrl); + } + }; + + public render(): React.ReactNode { + const { icon, iconComponent, linkUrl, linkAction, title, linkLabel } = this.props; + + return ( + <Wrap onClick={this.onClick}> + <div> + <Icon name={icon} component={iconComponent} size="large" margin={[0, 0, 'default', 0]} /> + + <Title>{title}</Title> + + <Button isWithArrow={true} isTransparent={true} href={linkUrl} onClick={linkAction}> + {linkLabel} + </Button> + </div> + </Wrap> + ); + } +} + +export const BlockIconLink = withRouter(BaseComponent); + +const Wrap = styled.div` + width: calc(50% - 15px); + height: 400px; + padding: 40px; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + transition: background-color 0.25s; + background-color: ${props => props.theme.lightBgColor}; + cursor: pointer; + + a, + button { + pointer-events: none; + } + + @media (max-width: 900px) { + width: 100%; + margin-top: 30px; + } + + &:hover { + background-color: #002d28; + } +`; + +const Title = styled.h2` + font-size: 20px; + margin-bottom: 30px; + color: ${props => props.theme.linkColor}; +`; |