diff options
author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-14 21:59:22 +0800 |
---|---|---|
committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-14 21:59:35 +0800 |
commit | ef403108fb0f5ed2798bc7eb59fa487c323ac1fb (patch) | |
tree | fdd7fd851deb74685bcd1fe602ddc505b1b9e6b6 /packages/website/ts/@next/components/blockIconLink.tsx | |
parent | 8a06dccbbf7e95b4223446cbd018f55b90214a62 (diff) | |
download | dexon-sol-tools-ef403108fb0f5ed2798bc7eb59fa487c323ac1fb.tar dexon-sol-tools-ef403108fb0f5ed2798bc7eb59fa487c323ac1fb.tar.gz dexon-sol-tools-ef403108fb0f5ed2798bc7eb59fa487c323ac1fb.tar.bz2 dexon-sol-tools-ef403108fb0f5ed2798bc7eb59fa487c323ac1fb.tar.lz dexon-sol-tools-ef403108fb0f5ed2798bc7eb59fa487c323ac1fb.tar.xz dexon-sol-tools-ef403108fb0f5ed2798bc7eb59fa487c323ac1fb.tar.zst dexon-sol-tools-ef403108fb0f5ed2798bc7eb59fa487c323ac1fb.zip |
Edits CTA landing section
Diffstat (limited to 'packages/website/ts/@next/components/blockIconLink.tsx')
-rw-r--r-- | packages/website/ts/@next/components/blockIconLink.tsx | 87 |
1 files changed, 62 insertions, 25 deletions
diff --git a/packages/website/ts/@next/components/blockIconLink.tsx b/packages/website/ts/@next/components/blockIconLink.tsx index 0e97aed1a..648b5a485 100644 --- a/packages/website/ts/@next/components/blockIconLink.tsx +++ b/packages/website/ts/@next/components/blockIconLink.tsx @@ -1,41 +1,72 @@ 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; + icon?: string; + iconComponent?: React.ReactNode; title: string; linkLabel: string; linkUrl?: string; linkAction?: () => void; } -export const BlockIconLink = (props: Props) => ( - <Wrap> - <div> - <Icon - name={props.icon} - size="large" - margin={[0, 0, 'default', 0]} - /> - - <Title> - {props.title} - </Title> - - <Button - isWithArrow={true} - isTransparent={true} - href={props.linkUrl} - onClick={props.linkAction} - > - {props.linkLabel} - </Button> - </div> - </Wrap> -); +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); @@ -46,6 +77,12 @@ const Wrap = styled.div` align-items: center; text-align: center; background-color: ${props => props.theme.lightBgColor}; + cursor: pointer; + + a, + button { + pointer-events: none; + } @media (max-width: 900px) { width: 100%; |