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: '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<FooterProps, FooterState> { public render() { return ( <div className="relative pb4 pt2" style={{backgroundColor: CUSTOM_DARK_GRAY}}> <div className="mx-auto max-width-4 md-px2 lg-px0 py4 clearfix" style={{color: 'white'}}> <div className="col lg-col-4 md-col-4 col-12 left"> <div className="sm-mx-auto" style={{width: 148}}> <div> <img src="/images/protocol_logo_white.png" height="30" /> </div> <div style={{fontSize: 11, color: CUSTOM_LIGHTEST_GRAY, paddingLeft: 37, paddingTop: 2}}> © ZeroEx, Intl. </div> </div> </div> <div className="col lg-col-8 md-col-8 col-12 lg-pl4 md-pl4"> <div className="col lg-col-4 md-col-4 col-12"> <div className="lg-right md-right sm-center"> {this.renderHeader(Sections.Documentation)} {_.map(menuItemsBySection[Sections.Documentation], this.renderMenuItem.bind(this))} </div> </div> <div className="col lg-col-4 md-col-4 col-12 lg-pr2 md-pr2"> <div className="lg-right md-right sm-center"> {this.renderHeader(Sections.Community)} {_.map(menuItemsBySection[Sections.Community], this.renderMenuItem.bind(this))} </div> </div> <div className="col lg-col-4 md-col-4 col-12"> <div className="lg-right md-right sm-center"> {this.renderHeader(Sections.Organization)} {_.map(menuItemsBySection[Sections.Organization], this.renderMenuItem.bind(this))} </div> </div> </div> </div> </div> ); } private renderIcon(fileName: string) { return ( <div style={{height: ICON_DIMENSION, width: ICON_DIMENSION}}> <img src={`/images/social/${fileName}`} style={{width: ICON_DIMENSION}} /> </div> ); } private renderMenuItem(item: FooterMenuItem) { const iconIfExists = titleToIcon[item.title]; return ( <div key={item.title} className="sm-center" style={{fontSize: 13, paddingTop: 25}} > {item.isExternal ? <a className="text-decoration-none" style={linkStyle} target="_blank" href={item.path} > {!_.isUndefined(iconIfExists) ? <div className="sm-mx-auto" style={{width: 65}}> <div className="flex"> <div className="pr1"> {this.renderIcon(iconIfExists)} </div> <div>{item.title}</div> </div> </div> : item.title } </a> : <Link to={item.path} style={linkStyle} className="text-decoration-none" > <div> {!_.isUndefined(iconIfExists) && <div className="pr1"> {this.renderIcon(iconIfExists)} </div> } {item.title} </div> </Link> } </div> ); } private renderHeader(title: string) { const headerStyle = { textTransform: 'uppercase', color: CUSTOM_LIGHT_GRAY, letterSpacing: 2, fontFamily: 'Roboto Mono', fontSize: 13, }; return ( <div className="lg-pb2 md-pb2 sm-pt4" style={headerStyle} > {title} </div> ); } private renderHomepageLink(title: string) { const hash = title.toLowerCase(); if (this.props.location.pathname === WebsitePaths.Home) { return ( <ScrollLink style={linkStyle} to={hash} smooth={true} offset={0} duration={constants.HOME_SCROLL_DURATION_MS} containerId="home" > {title} </ScrollLink> ); } else { return ( <HashLink to={`/#${hash}`} className="text-decoration-none" style={linkStyle} > {title} </HashLink> ); } } }