diff options
author | Francesco Agosti <francesco.agosti93@gmail.com> | 2018-12-06 07:44:54 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-12-06 07:44:54 +0800 |
commit | 21122f0137c39835e5cf15e1a5c2bdbd20030611 (patch) | |
tree | b0b38b40bac88612a5dad019e37087e4a27ff054 /packages/website/ts/pages/instant/features.tsx | |
parent | e6acc0416a0de54d53c8f50e522ee2a952c58965 (diff) | |
parent | c282c2fcc40b6efbac7c91c3d17b204756359a26 (diff) | |
download | dexon-sol-tools-21122f0137c39835e5cf15e1a5c2bdbd20030611.tar dexon-sol-tools-21122f0137c39835e5cf15e1a5c2bdbd20030611.tar.gz dexon-sol-tools-21122f0137c39835e5cf15e1a5c2bdbd20030611.tar.bz2 dexon-sol-tools-21122f0137c39835e5cf15e1a5c2bdbd20030611.tar.lz dexon-sol-tools-21122f0137c39835e5cf15e1a5c2bdbd20030611.tar.xz dexon-sol-tools-21122f0137c39835e5cf15e1a5c2bdbd20030611.tar.zst dexon-sol-tools-21122f0137c39835e5cf15e1a5c2bdbd20030611.zip |
Merge pull request #1369 from 0xProject/feature/website/instant-configurator
[website][instant] Instant configurator
Diffstat (limited to 'packages/website/ts/pages/instant/features.tsx')
-rw-r--r-- | packages/website/ts/pages/instant/features.tsx | 53 |
1 files changed, 11 insertions, 42 deletions
diff --git a/packages/website/ts/pages/instant/features.tsx b/packages/website/ts/pages/instant/features.tsx index 9c1668c1c..ed98ceb53 100644 --- a/packages/website/ts/pages/instant/features.tsx +++ b/packages/website/ts/pages/instant/features.tsx @@ -4,9 +4,9 @@ import * as React from 'react'; import { Container } from 'ts/components/ui/container'; import { Image } from 'ts/components/ui/image'; import { Text } from 'ts/components/ui/text'; +import { ActionLink, ActionLinkProps } from 'ts/pages/instant/action_link'; import { colors } from 'ts/style/colors'; -import { ScreenWidths } from 'ts/types'; -import { utils } from 'ts/utils/utils'; +import { ScreenWidths, WebsitePaths } from 'ts/types'; export interface FeatureProps { screenWidth: ScreenWidths; @@ -21,7 +21,7 @@ export const Features = (props: FeatureProps) => { }; const exploreTheDocsLinkInfo = { displayText: 'Explore the docs', - linkSrc: `${utils.getCurrentBaseUrl()}/wiki#Get-Started`, + linkSrc: `${WebsitePaths.Wiki}#Get-Started-With-Instant`, }; const tokenLinkInfos = isSmallScreen ? [getStartedLinkInfo] : [getStartedLinkInfo, exploreTheDocsLinkInfo]; return ( @@ -40,7 +40,7 @@ export const Features = (props: FeatureProps) => { linkInfos={[ { displayText: 'Learn about affiliate fees', - linkSrc: `${utils.getCurrentBaseUrl()}/wiki#Learn-About-Affiliate-Fees`, + linkSrc: `${WebsitePaths.Wiki}#Learn-About-Affiliate-Fees`, }, ]} screenWidth={props.screenWidth} @@ -52,7 +52,7 @@ export const Features = (props: FeatureProps) => { linkInfos={[ { displayText: 'Explore AssetBuyer', - linkSrc: `${utils.getCurrentBaseUrl()}/docs/asset-buyer`, + linkSrc: `${WebsitePaths.Docs}/asset-buyer`, }, ]} screenWidth={props.screenWidth} @@ -61,17 +61,11 @@ export const Features = (props: FeatureProps) => { ); }; -interface LinkInfo { - displayText: string; - linkSrc?: string; - onClick?: () => void; -} - interface FeatureItemProps { imgSrc: string; title: string; description: string; - linkInfos: LinkInfo[]; + linkInfos: ActionLinkProps[]; screenWidth: ScreenWidths; } @@ -95,36 +89,11 @@ const FeatureItem = (props: FeatureItemProps) => { </Text> </Container> <Container className="flex" marginTop="28px"> - {_.map(linkInfos, linkInfo => { - const onClick = (event: React.MouseEvent<HTMLElement>) => { - if (!_.isUndefined(linkInfo.onClick)) { - linkInfo.onClick(); - } else if (!_.isUndefined(linkInfo.linkSrc)) { - utils.openUrl(linkInfo.linkSrc); - } - }; - return ( - <Container - key={linkInfo.linkSrc} - className="flex items-center" - marginRight="32px" - onClick={onClick} - cursor="pointer" - > - <Container> - <Text fontSize="16px" fontColor={colors.white}> - {linkInfo.displayText} - </Text> - </Container> - <Container paddingTop="1px" paddingLeft="6px"> - <i - className="zmdi zmdi-chevron-right bold" - style={{ fontSize: 16, color: colors.white }} - /> - </Container> - </Container> - ); - })} + {_.map(linkInfos, linkInfo => ( + <Container key={linkInfo.displayText} marginRight="32px"> + <ActionLink {...linkInfo} /> + </Container> + ))} </Container> </Container> ); |