import * as _ from 'lodash'; import * as React from 'react'; import { Link, } from 'react-router-dom'; import {WebsitePaths} from 'ts/types'; import {colors} from 'ts/utils/colors'; 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 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.URL_ZEROEX_CHAT, fileName: 'rocketchat.png', }, { title: 'Blog', isExternal: true, path: constants.URL_BLOG, fileName: 'medium.png', }, { title: 'Twitter', isExternal: true, path: constants.URL_TWITTER, fileName: 'twitter.png', }, { title: 'Reddit', isExternal: true, path: constants.URL_REDDIT, fileName: 'reddit.png', }, ], Organization: [ { title: 'About', isExternal: false, path: WebsitePaths.About, }, { title: 'Careers', isExternal: true, path: constants.URL_ANGELLIST, }, { title: 'Contact', isExternal: true, path: 'mailto:team@0xproject.com', }, ], }; const linkStyle = { color: colors.white, cursor: 'pointer', }; const titleToIcon: {[title: string]: string} = { 'Rocket.chat': 'rocketchat.png', 'Blog': 'medium.png', 'Twitter': 'twitter.png', 'Reddit': 'reddit.png', }; export interface FooterProps {} 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: colors.grey400, letterSpacing: 2, fontFamily: 'Roboto Mono', fontSize: 13, }; return (
{title}
); } }