Merge pull request #1154 from 0xProject/dev-section-redesign

[BASE_BRANCH] Developer section redesign

1 files changed, 50 insertions, 0 deletions

diff --git a/packages/website/ts/components/ui/custom_menu_item.tsx b/packages/website/ts/components/ui/custom_menu_item.tsx
new file mode 100644
index 000000000..c25da6be6
--- /dev/null
+++ b/packages/website/ts/components/ui/custom_menu_item.tsx
@@ -0,0 +1,50 @@
+import { Link } from '@0xproject/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+
+interface CustomMenuItemProps {
+    to: string;
+    onClick?: () => void;
+    className?: string;
+}
+
+interface CustomMenuItemState {
+    isHovering: boolean;
+}
+
+export class CustomMenuItem extends React.Component<CustomMenuItemProps, CustomMenuItemState> {
+    public static defaultProps: Partial<CustomMenuItemProps> = {
+        onClick: _.noop.bind(_),
+        className: '',
+    };
+    public constructor(props: CustomMenuItemProps) {
+        super(props);
+        this.state = {
+            isHovering: false,
+        };
+    }
+    public render(): React.ReactNode {
+        const menuItemStyles = {
+            cursor: 'pointer',
+            opacity: this.state.isHovering ? 0.5 : 1,
+        };
+        return (
+            <Link to={this.props.to}>
+                <div
+                    onClick={this.props.onClick.bind(this)}
+                    className={`mx-auto ${this.props.className}`}
+                    style={menuItemStyles}
+                    onMouseEnter={this._onToggleHover.bind(this, true)}
+                    onMouseLeave={this._onToggleHover.bind(this, false)}
+                >
+                    {this.props.children}
+                </div>
+            </Link>
+        );
+    }
+    private _onToggleHover(isHovering: boolean): void {
+        this.setState({
+            isHovering,
+        });
+    }
+}