Merge pull request #1369 from 0xProject/feature/website/instant-configurator

[website][instant] Instant configurator

1 files changed, 46 insertions, 0 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..c196f03ef
--- /dev/null
+++ b/packages/website/ts/pages/instant/action_link.tsx
@@ -0,0 +1,46 @@
+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}`} 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 readonly _handleClick = (event: React.MouseEvent<HTMLElement>) => {
+        if (!_.isUndefined(this.props.onClick)) {
+            this.props.onClick();
+        } else if (!_.isUndefined(this.props.linkSrc)) {
+            utils.openUrl(this.props.linkSrc);
+        }
+    };
+}