1 files changed, 54 insertions, 0 deletions
diff --git a/packages/website/ts/components/ui/menu_item.tsx b/packages/website/ts/components/ui/menu_item.tsx
new file mode 100644
index 000000000..b9caa91fb
--- /dev/null
+++ b/packages/website/ts/components/ui/menu_item.tsx
@@ -0,0 +1,54 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import {Link} from 'react-router-dom';
+import {Styles} from 'ts/types';
+import {constants} from 'ts/utils/constants';
+import {colors} from 'material-ui/styles';
+
+interface MenuItemProps {
+    to: string;
+    style?: React.CSSProperties;
+    onClick?: () => void;
+    className?: string;
+}
+
+interface MenuItemState {
+    isHovering: boolean;
+}
+
+export class MenuItem extends React.Component<MenuItemProps, MenuItemState> {
+    public static defaultProps: Partial<MenuItemProps> = {
+        onClick: _.noop,
+        className: '',
+    };
+    public constructor(props: MenuItemProps) {
+        super(props);
+        this.state = {
+            isHovering: false,
+        };
+    }
+    public render() {
+        const menuItemStyles = {
+            cursor: 'pointer',
+            opacity: this.state.isHovering ? 0.5 : 1,
+        };
+        return (
+            <Link to={this.props.to} style={{textDecoration: 'none', ...this.props.style}}>
+                <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) {
+        this.setState({
+            isHovering,
+        });
+    }
+}