import * as _ from 'lodash'; import * as React from 'react'; import { Link, } from 'react-router-dom'; import {HashLink} from 'react-router-hash-link'; import { Link as ScrollLink, } from 'react-scroll'; import {Styles, WebsitePaths} from 'ts/types'; import {constants} from 'ts/utils/constants'; interface MenuItemsBySection { [sectionName: string]: FooterMenuItem[]; } interface FooterMenuItem { title: string; path?: string; isExternal?: boolean; fileName?: string; } enum Sections { Documentation = 'Documentation', Community = 'Community', Organization = 'Organization', } const ICON_DIMENSION = 16; const CUSTOM_DARK_GRAY = '#393939'; const CUSTOM_LIGHT_GRAY = '#CACACA'; const CUSTOM_LIGHTEST_GRAY = '#9E9E9E'; const menuItemsBySection: MenuItemsBySection = { Documentation: [ { title: '0x.js', path: WebsitePaths.ZeroExJs, }, { title: '0x Smart Contracts', path: WebsitePaths.SmartContracts, }, { title: '0x Connect', path: WebsitePaths.Connect, }, { title: 'Whitepaper', path: WebsitePaths.Whitepaper, isExternal: true, }, { title: 'Wiki', path: WebsitePaths.Wiki, }, { title: 'FAQ', path: WebsitePaths.FAQ, }, ], Community: [ { title: 'Rocket.chat', isExternal: true, path: constants.ZEROEX_CHAT_URL, fileName: 'rocketchat.png', }, { title: 'Blog', isExternal: true, path: constants.BLOG_URL, fileName: 'medium.png', }, { title: 'Twitter', isExternal: true, path: constants.TWITTER_URL, fileName: 'twitter.png', }, { title: 'Reddit', isExternal: true, path: constants.REDDIT_URL, fileName: 'reddit.png', }, ], Organization: [ { title: 'About', isExternal: false, path: WebsitePaths.About, }, { title: 'Careers', isExternal: true, path: constants.ANGELLIST_URL, }, { title: 'Contact', isExternal: true, path: 'mailto:team@0xproject.com', }, ], }; const linkStyle = { color: 'white', cursor: 'pointer', }; const titleToIcon: {[title: string]: string} = { 'Rocket.chat': 'rocketchat.png', 'Blog': 'medium.png', 'Twitter': 'twitter.png', 'Reddit': 'reddit.png', }; export interface FooterProps { location: Location; } interface FooterState {} export class Footer extends React.Component { public render() { return (
© ZeroEx, Intl.
{this.renderHeader(Sections.Documentation)} {_.map(menuItemsBySection[Sections.Documentation], this.renderMenuItem.bind(this))}
{this.renderHeader(Sections.Community)} {_.map(menuItemsBySection[Sections.Community], this.renderMenuItem.bind(this))}
{this.renderHeader(Sections.Organization)} {_.map(menuItemsBySection[Sections.Organization], this.renderMenuItem.bind(this))}
); } private renderIcon(fileName: string) { return (
); } private renderMenuItem(item: FooterMenuItem) { const iconIfExists = titleToIcon[item.title]; return (
{item.isExternal ? {!_.isUndefined(iconIfExists) ?
{this.renderIcon(iconIfExists)}
{item.title}
: item.title }
:
{!_.isUndefined(iconIfExists) &&
{this.renderIcon(iconIfExists)}
} {item.title}
}
); } private renderHeader(title: string) { const headerStyle = { textTransform: 'uppercase', color: CUSTOM_LIGHT_GRAY, letterSpacing: 2, fontFamily: 'Roboto Mono', fontSize: 13, }; return (
{title}
); } private renderHomepageLink(title: string) { const hash = title.toLowerCase(); if (this.props.location.pathname === WebsitePaths.Home) { return ( {title} ); } else { return ( {title} ); } } }