feat: fix footer links

This commit is contained in:
fragosti 2018-12-17 15:12:54 -08:00
parent a77e5a1a12
commit be3142a96a
3 changed files with 25 additions and 23 deletions

View File

@ -8,6 +8,7 @@ import { Column, FlexWrap, WrapGrid } from 'ts/@next/components/newLayout';
import { ThemeValuesInterface } from 'ts/@next/components/siteWrap'; import { ThemeValuesInterface } from 'ts/@next/components/siteWrap';
import { Heading } from 'ts/@next/components/text'; import { Heading } from 'ts/@next/components/text';
import { WebsitePaths } from 'ts/types'; import { WebsitePaths } from 'ts/types';
import { constants } from 'ts/utils/constants';
interface Props { interface Props {
theme: ThemeValuesInterface; theme: ThemeValuesInterface;
@ -60,12 +61,12 @@ const linksData: LinkConfig[] = [
}, },
{ {
label: 'Github', label: 'Github',
url: 'https://github.com/0xProject', url: constants.URL_GITHUB_ORG,
shouldOpenInNewTab: true, shouldOpenInNewTab: true,
}, },
{ {
label: 'Protocol specification', label: 'Protocol specification',
url: 'https://github.com/0xProject/0x-protocol-specification/blob/master/v2/v2-specification.md', url: constants.URL_PROTOCOL_SPECIFICATION,
shouldOpenInNewTab: true, shouldOpenInNewTab: true,
}, },
]; ];

View File

@ -1,3 +1,4 @@
import { Link as SmartLink } from '@0x/react-shared';
import * as _ from 'lodash'; import * as _ from 'lodash';
import * as React from 'react'; import * as React from 'react';
import MediaQuery from 'react-responsive'; import MediaQuery from 'react-responsive';
@ -8,11 +9,12 @@ import { Logo } from 'ts/@next/components/logo';
import { Column, FlexWrap, WrapGrid } from 'ts/@next/components/newLayout'; import { Column, FlexWrap, WrapGrid } from 'ts/@next/components/newLayout';
import { NewsletterForm } from 'ts/@next/components/newsletter_form'; import { NewsletterForm } from 'ts/@next/components/newsletter_form';
import { WebsitePaths } from 'ts/types'; import { WebsitePaths } from 'ts/types';
import { constants } from 'ts/utils/constants';
interface LinkInterface { interface LinkInterface {
text: string; text: string;
url: string; url: string;
newWindow?: boolean; shouldOpenInNewTab?: boolean;
} }
interface LinkRows { interface LinkRows {
@ -37,9 +39,9 @@ const linkRows: LinkRows[] = [
{ {
heading: 'Developers', heading: 'Developers',
links: [ links: [
{ url: '#', text: 'Documentation' }, { url: WebsitePaths.Docs, text: 'Documentation' },
{ url: '#', text: 'GitHub' }, { url: constants.URL_GITHUB_ORG, text: 'GitHub', shouldOpenInNewTab: true },
{ url: '#', text: 'Whitepaper' }, { url: WebsitePaths.Whitepaper, text: 'Whitepaper', shouldOpenInNewTab: true },
], ],
}, },
{ {
@ -57,10 +59,10 @@ const linkRows: LinkRows[] = [
heading: 'Community', heading: 'Community',
isOnMobile: true, isOnMobile: true,
links: [ links: [
{ url: '#', text: 'Twitter' }, { url: constants.URL_TWITTER, text: 'Twitter', shouldOpenInNewTab: true },
{ url: '#', text: 'Rocket Chat' }, { url: constants.URL_ZEROEX_CHAT, text: 'Discord Chat', shouldOpenInNewTab: true },
{ url: '#', text: 'Facebook' }, { url: constants.URL_FACEBOOK, text: 'Facebook', shouldOpenInNewTab: true },
{ url: '#', text: 'Reddit' }, { url: constants.URL_REDDIT, text: 'Reddit', shouldOpenInNewTab: true },
], ],
}, },
]; ];
@ -78,9 +80,7 @@ export const Footer: React.StatelessComponent = () => (
{_.map(linkRows, (row: LinkRows, index) => ( {_.map(linkRows, (row: LinkRows, index) => (
<MediaQuery minWidth={row.isOnMobile ? 0 : 768} key={`fc-${index}`}> <MediaQuery minWidth={row.isOnMobile ? 0 : 768} key={`fc-${index}`}>
<FooterSectionWrap> <FooterSectionWrap>
<RowHeading> <RowHeading>{row.heading}</RowHeading>
{row.heading}
</RowHeading>
<LinkList links={row.links} /> <LinkList links={row.links} />
</FooterSectionWrap> </FooterSectionWrap>
@ -93,15 +93,15 @@ export const Footer: React.StatelessComponent = () => (
); );
const LinkList = (props: LinkListProps) => ( const LinkList = (props: LinkListProps) => (
<List> <List>
{_.map(props.links, (link, index) => ( {_.map(props.links, (link, index) => (
<li key={`fl-${index}`}> <li key={`fl-${index}`}>
<Link to={link.url}> <Link to={link.url} shouldOpenInNewTab={link.shouldOpenInNewTab}>
{link.text} {link.text}
</Link> </Link>
</li> </li>
))} ))}
</List> </List>
); );
const FooterWrap = styled.footer` const FooterWrap = styled.footer`
@ -154,7 +154,7 @@ const List = styled.ul`
} }
`; `;
const Link = styled(ReactRouterLink)` const Link = styled(SmartLink)`
color: inherit; color: inherit;
opacity: 0.5; opacity: 0.5;
display: block; display: block;

View File

@ -96,6 +96,7 @@ export const constants = {
URL_SANDBOX: 'https://codesandbox.io/s/1qmjyp7p5j', URL_SANDBOX: 'https://codesandbox.io/s/1qmjyp7p5j',
URL_STANDARD_RELAYER_API_GITHUB: 'https://github.com/0xProject/standard-relayer-api/blob/master/README.md', URL_STANDARD_RELAYER_API_GITHUB: 'https://github.com/0xProject/standard-relayer-api/blob/master/README.md',
URL_TWITTER: 'https://twitter.com/0xproject', URL_TWITTER: 'https://twitter.com/0xproject',
URL_FACEBOOK: 'https://www.facebook.com/0xProject/',
URL_WETH_IO: 'https://weth.io/', URL_WETH_IO: 'https://weth.io/',
URL_ZEROEX_CHAT, URL_ZEROEX_CHAT,
URL_LAUNCH_KIT: 'https://github.com/0xProject/0x-launch-kit', URL_LAUNCH_KIT: 'https://github.com/0xProject/0x-launch-kit',