Merge pull request #1448 from 0xProject/feature/website/0x-org

[website][react-shared][instant] 0x org

1 files changed, 80 insertions, 0 deletions

diff --git a/packages/website/ts/@next/components/blockIconLink.tsx b/packages/website/ts/@next/components/blockIconLink.tsx
new file mode 100644
index 000000000..bdcc5c29d
--- /dev/null
+++ b/packages/website/ts/@next/components/blockIconLink.tsx
@@ -0,0 +1,80 @@
+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;
+    iconComponent?: React.ReactNode;
+    title: string;
+    linkLabel: string;
+    linkUrl?: string;
+    linkAction?: () => void;
+}
+
+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);
+    height: 400px;
+    padding: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    transition: background-color 0.25s;
+    background-color: ${props => props.theme.lightBgColor};
+    cursor: pointer;
+
+    a,
+    button {
+        pointer-events: none;
+    }
+
+    @media (max-width: 900px) {
+        width: 100%;
+        margin-top: 30px;
+    }
+
+    &:hover {
+        background-color: #002d28;
+    }
+`;
+
+const Title = styled.h2`
+    font-size: 20px;
+    margin-bottom: 30px;
+    color: ${props => props.theme.linkColor};
+`;