Use same Link UI component for react-scroll links

3 files changed, 2 insertions, 86 deletions

diff --git a/packages/website/ts/components/ui/custom_menu_item.tsx b/packages/website/ts/components/ui/custom_menu_item.tsx
index c51095709..11f61b336 100644
--- a/packages/website/ts/components/ui/custom_menu_item.tsx
+++ b/packages/website/ts/components/ui/custom_menu_item.tsx
@@ -1,6 +1,6 @@
+import { Link } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
-import { Link } from 'ts/components/ui/link';
 
 interface CustomMenuItemProps {
     to: string;
diff --git a/packages/website/ts/components/ui/link.tsx b/packages/website/ts/components/ui/link.tsx
deleted file mode 100644
index ad98efa6c..000000000
--- a/packages/website/ts/components/ui/link.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import { Link as ReactRounterLink } from 'react-router-dom';
-import { LinkType } from 'ts/types';
-
-export interface LinkProps {
-    to: string;
-    type?: LinkType;
-    shouldOpenInNewTab?: boolean;
-    style?: React.CSSProperties;
-    className?: string;
-    onMouseOver?: (event: React.MouseEvent<HTMLElement>) => void;
-    onMouseLeave?: (event: React.MouseEvent<HTMLElement>) => void;
-    onMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void;
-}
-
-/**
- * A generic link component which let's the developer render internal & external links, and their associated
- * behaviors with a single link component. Many times we want a menu including both internal & external links
- * and this abstracts away the differences of rendering both types of links.
- */
-export const Link: React.StatelessComponent<LinkProps> = ({
-    style,
-    className,
-    type,
-    to,
-    shouldOpenInNewTab,
-    children,
-    onMouseOver,
-    onMouseLeave,
-    onMouseEnter,
-}) => {
-    const styleWithDefault = {
-        textDecoration: 'none',
-        ...style,
-    };
-
-    switch (type) {
-        case LinkType.External:
-            return (
-                <a
-                    target={shouldOpenInNewTab ? '_blank' : ''}
-                    className={className}
-                    style={styleWithDefault}
-                    href={to}
-                    onMouseOver={onMouseOver}
-                    onMouseEnter={onMouseEnter}
-                    onMouseLeave={onMouseLeave}
-                >
-                    {children}
-                </a>
-            );
-        case LinkType.ReactRoute:
-            return (
-                <ReactRounterLink
-                    to={to}
-                    className={className}
-                    style={styleWithDefault}
-                    target={shouldOpenInNewTab ? '_blank' : ''}
-                    onMouseOver={onMouseOver}
-                    onMouseEnter={onMouseEnter}
-                    onMouseLeave={onMouseLeave}
-                >
-                    {children}
-                </ReactRounterLink>
-            );
-        case LinkType.ReactScroll:
-            return <div>TODO</div>;
-        default:
-            throw new Error(`Unrecognized LinkType: ${type}`);
-    }
-};
-
-Link.defaultProps = {
-    type: LinkType.ReactRoute,
-    shouldOpenInNewTab: false,
-    style: {},
-    className: '',
-    onMouseOver: _.noop.bind(_),
-    onMouseLeave: _.noop.bind(_),
-    onMouseEnter: _.noop.bind(_),
-};
-
-Link.displayName = 'Link';
diff --git a/packages/website/ts/components/ui/simple_menu.tsx b/packages/website/ts/components/ui/simple_menu.tsx
index 767da3675..bdaf0701e 100644
--- a/packages/website/ts/components/ui/simple_menu.tsx
+++ b/packages/website/ts/components/ui/simple_menu.tsx
@@ -1,7 +1,7 @@
+import { Link } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import * as CopyToClipboard from 'react-copy-to-clipboard';
-import { Link } from 'ts/components/ui/link';
 
 import { Container } from 'ts/components/ui/container';
 import { Text } from 'ts/components/ui/text';