From c07412a992284b2f3045be1c620ea2e0a351139a Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Tue, 2 Oct 2018 20:10:59 +0100
Subject: Use new Link UI component everywhere, and add complementary ALink
 type

---
 .../website/ts/components/ui/custom_menu_item.tsx  | 51 ++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 packages/website/ts/components/ui/custom_menu_item.tsx

(limited to 'packages/website/ts/components/ui/custom_menu_item.tsx')

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..c51095709
--- /dev/null
+++ b/packages/website/ts/components/ui/custom_menu_item.tsx
@@ -0,0 +1,51 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import { Link } from 'ts/components/ui/link';
+
+interface CustomMenuItemProps {
+    to: string;
+    style?: React.CSSProperties;
+    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} style={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): void {
+        this.setState({
+            isHovering,
+        });
+    }
+}
-- 
cgit v1.2.3