aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/footer.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/components/footer.tsx')
-rw-r--r--packages/website/ts/components/footer.tsx236
1 files changed, 134 insertions, 102 deletions
diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx
index a0f1a0c96..810460cac 100644
--- a/packages/website/ts/components/footer.tsx
+++ b/packages/website/ts/components/footer.tsx
@@ -1,9 +1,13 @@
import * as _ from 'lodash';
+import DropDownMenu from 'material-ui/DropDownMenu';
+import MenuItem from 'material-ui/MenuItem';
import * as React from 'react';
import { Link } from 'react-router-dom';
-import { WebsitePaths } from 'ts/types';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { Deco, Key, Language, WebsitePaths } from 'ts/types';
import { colors } from 'ts/utils/colors';
import { constants } from 'ts/utils/constants';
+import { Translate } from 'ts/utils/translate';
interface MenuItemsBySection {
[sectionName: string]: FooterMenuItem[];
@@ -15,105 +19,114 @@ interface FooterMenuItem {
isExternal?: boolean;
}
-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,
- },
- {
- title: 'Blog',
- isExternal: true,
- path: constants.URL_BLOG,
- },
- {
- title: 'Twitter',
- isExternal: true,
- path: constants.URL_TWITTER,
- },
- {
- title: 'Reddit',
- isExternal: true,
- path: constants.URL_REDDIT,
- },
- {
- title: 'Forum',
- isExternal: true,
- path: constants.URL_DISCOURSE_FORUM,
- },
- ],
- 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',
- Forum: 'discourse.png',
+const languageToMenuTitle = {
+ [Language.English]: 'English',
+ [Language.Russian]: 'Русский',
+ [Language.Spanish]: 'Español',
+ [Language.Korean]: '한국어',
+ [Language.Chinese]: '中文',
};
-export interface FooterProps {}
+export interface FooterProps {
+ translate: Translate;
+ dispatcher: Dispatcher;
+}
-interface FooterState {}
+interface FooterState {
+ selectedLanguage: Language;
+}
export class Footer extends React.Component<FooterProps, FooterState> {
+ constructor(props: FooterProps) {
+ super();
+ this.state = {
+ selectedLanguage: props.translate.getLanguage(),
+ };
+ }
public render() {
+ const menuItemsBySection: MenuItemsBySection = {
+ [Key.Documentation]: [
+ {
+ title: '0x.js',
+ path: WebsitePaths.ZeroExJs,
+ },
+ {
+ title: this.props.translate.get(Key.SmartContracts, Deco.Cap),
+ path: WebsitePaths.SmartContracts,
+ },
+ {
+ title: this.props.translate.get(Key.Connect, Deco.Cap),
+ path: WebsitePaths.Connect,
+ },
+ {
+ title: this.props.translate.get(Key.Whitepaper, Deco.Cap),
+ path: WebsitePaths.Whitepaper,
+ isExternal: true,
+ },
+ {
+ title: this.props.translate.get(Key.Wiki, Deco.Cap),
+ path: WebsitePaths.Wiki,
+ },
+ {
+ title: this.props.translate.get(Key.Faq, Deco.Cap),
+ path: WebsitePaths.FAQ,
+ },
+ ],
+ [Key.Community]: [
+ {
+ title: this.props.translate.get(Key.RocketChat, Deco.Cap),
+ isExternal: true,
+ path: constants.URL_ZEROEX_CHAT,
+ },
+ {
+ title: this.props.translate.get(Key.Blog, Deco.Cap),
+ isExternal: true,
+ path: constants.URL_BLOG,
+ },
+ {
+ title: 'Twitter',
+ isExternal: true,
+ path: constants.URL_TWITTER,
+ },
+ {
+ title: 'Reddit',
+ isExternal: true,
+ path: constants.URL_REDDIT,
+ },
+ {
+ title: this.props.translate.get(Key.Forum, Deco.Cap),
+ isExternal: true,
+ path: constants.URL_DISCOURSE_FORUM,
+ },
+ ],
+ [Key.Organization]: [
+ {
+ title: this.props.translate.get(Key.About, Deco.Cap),
+ isExternal: false,
+ path: WebsitePaths.About,
+ },
+ {
+ title: this.props.translate.get(Key.Careers, Deco.Cap),
+ isExternal: true,
+ path: constants.URL_ANGELLIST,
+ },
+ {
+ title: this.props.translate.get(Key.Contact, Deco.Cap),
+ isExternal: true,
+ path: 'mailto:team@0xproject.com',
+ },
+ ],
+ };
+ const languageMenuItems = _.map(languageToMenuTitle, (menuTitle: string, language: Language) => {
+ return <MenuItem key={menuTitle} value={language} primaryText={menuTitle} />;
+ });
return (
<div className="relative pb4 pt2" style={{ backgroundColor: colors.darkerGrey }}>
<div className="mx-auto max-width-4 md-px2 lg-px0 py4 clearfix" style={{ color: colors.white }}>
@@ -132,25 +145,34 @@ export class Footer extends React.Component<FooterProps, FooterState> {
>
© ZeroEx, Intl.
</div>
+ <div className="pt4 center">
+ <DropDownMenu
+ labelStyle={{ color: colors.white }}
+ value={this.state.selectedLanguage}
+ onChange={this._updateLanguage.bind(this)}
+ >
+ {languageMenuItems}
+ </DropDownMenu>
+ </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))}
+ {this._renderHeader(Key.Documentation)}
+ {_.map(menuItemsBySection[Key.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))}
+ {this._renderHeader(Key.Community)}
+ {_.map(menuItemsBySection[Key.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))}
+ {this._renderHeader(Key.Organization)}
+ {_.map(menuItemsBySection[Key.Organization], this._renderMenuItem.bind(this))}
</div>
</div>
</div>
@@ -166,17 +188,22 @@ export class Footer extends React.Component<FooterProps, FooterState> {
);
}
private _renderMenuItem(item: FooterMenuItem) {
+ const titleToIcon: { [title: string]: string } = {
+ [this.props.translate.get(Key.RocketChat, Deco.Cap)]: 'rocketchat.png',
+ [this.props.translate.get(Key.Blog, Deco.Cap)]: 'medium.png',
+ Twitter: 'twitter.png',
+ Reddit: 'reddit.png',
+ [this.props.translate.get(Key.Forum, Deco.Cap)]: 'discourse.png',
+ };
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 className="inline-block">
+ <div className="pr1 table-cell">{this._renderIcon(iconIfExists)}</div>
+ <div className="table-cell">{item.title}</div>
</div>
) : (
item.title
@@ -195,9 +222,8 @@ export class Footer extends React.Component<FooterProps, FooterState> {
</div>
);
}
- private _renderHeader(title: string) {
+ private _renderHeader(key: Key) {
const headerStyle = {
- textTransform: 'uppercase',
color: colors.grey400,
letterSpacing: 2,
fontFamily: 'Roboto Mono',
@@ -205,8 +231,14 @@ export class Footer extends React.Component<FooterProps, FooterState> {
};
return (
<div className="lg-pb2 md-pb2 sm-pt4" style={headerStyle}>
- {title}
+ {this.props.translate.get(key, Deco.Upper)}
</div>
);
}
+ private _updateLanguage(e: any, index: number, value: Language) {
+ this.setState({
+ selectedLanguage: value,
+ });
+ this.props.dispatcher.updateSelectedLanguage(value);
+ }
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-23 12:23:41 +0800