aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
Diffstat (limited to 'packages')
-rw-r--r--packages/website/ts/pages/instant/action_link.tsx51
-rw-r--r--packages/website/ts/pages/instant/features.tsx40
2 files changed, 54 insertions, 37 deletions
diff --git a/packages/website/ts/pages/instant/action_link.tsx b/packages/website/ts/pages/instant/action_link.tsx
new file mode 100644
index 000000000..8a0bf24ff
--- /dev/null
+++ b/packages/website/ts/pages/instant/action_link.tsx
@@ -0,0 +1,51 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
+import { colors } from 'ts/style/colors';
+import { utils } from 'ts/utils/utils';
+
+export interface ActionLinkProps {
+ displayText: string;
+ linkSrc?: string;
+ onClick?: () => void;
+ fontSize?: number;
+ color?: string;
+ className?: string;
+}
+
+export class ActionLink extends React.Component<ActionLinkProps> {
+ public static defaultProps = {
+ fontSize: 16,
+ color: colors.white,
+ };
+ public render(): React.ReactNode {
+ const { displayText, fontSize, color, className } = this.props;
+ return (
+ <Container
+ className={`flex items-center ${className}`}
+ marginRight="32px"
+ onClick={this._handleClick}
+ cursor="pointer"
+ >
+ <Container>
+ <Text fontSize="16px" fontColor={color}>
+ {displayText}
+ </Text>
+ </Container>
+ <Container paddingTop="1px" paddingLeft="6px">
+ <i className="zmdi zmdi-chevron-right bold" style={{ fontSize, color }} />
+ </Container>
+ </Container>
+ );
+ }
+
+ private _handleClick = (event: React.MouseEvent<HTMLElement>) => {
+ if (!_.isUndefined(this.props.onClick)) {
+ this.props.onClick();
+ } else if (!_.isUndefined(this.props.linkSrc)) {
+ utils.openUrl(this.props.linkSrc);
+ }
+ };
+}
diff --git a/packages/website/ts/pages/instant/features.tsx b/packages/website/ts/pages/instant/features.tsx
index 9c1668c1c..6c6835311 100644
--- a/packages/website/ts/pages/instant/features.tsx
+++ b/packages/website/ts/pages/instant/features.tsx
@@ -2,6 +2,7 @@ import * as _ from 'lodash';
import * as React from 'react';
import { Container } from 'ts/components/ui/container';
+import { ActionLink, ActionLinkProps } from 'ts/pages/instant/action_link';
import { Image } from 'ts/components/ui/image';
import { Text } from 'ts/components/ui/text';
import { colors } from 'ts/style/colors';
@@ -61,17 +62,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 +90,7 @@ 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 => <ActionLink key={linkInfo.displayText} {...linkInfo} />)}
</Container>
</Container>
);