feat: factor out ActionLink component from features

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>
     );