crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactored docs home

Browse Source
This commit is contained in:
Piotr Janosz
2019-07-04 18:12:08 +02:00
committed by fabioberger
parent 1a3281a959
commit b2e592bb41
1 changed files with 73 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
packages/website/ts/pages/docs/home.tsx
View File

@@ -1,31 +1,89 @@
import { utils as sharedUtils } from '@0x/react-shared'; import React, { Fragment } from 'react';
import * as _ from 'lodash'; import styled from 'styled-components';
import * as React from 'react';
import styled, { keyframes } from 'styled-components';
import { Button } from 'ts/components/button'; import { Button } from 'ts/components/button';
import { CommunityLink, CommunityLinkProps } from 'ts/components/docs/community_link'; import { CommunityLink, CommunityLinkProps } from 'ts/components/docs/community_link';
import { Hero } from 'ts/components/docs/hero'; import { Hero } from 'ts/components/docs/hero';
import { SearchInput } from 'ts/components/docs/search_input';
import { LinkProps, ShortcutLink } from 'ts/components/docs/shortcut_link'; import { LinkProps, ShortcutLink } from 'ts/components/docs/shortcut_link';
import { SiteWrap } from 'ts/components/docs/siteWrap'; import { SiteWrap } from 'ts/components/docs/siteWrap';
import { StepLinkConfig } from 'ts/components/docs/step_link'; import { StepLinkConfig } from 'ts/components/docs/step_link';
import { StepLinks } from 'ts/components/docs/step_links'; import { StepLinks } from 'ts/components/docs/step_links';
import { DocumentTitle } from 'ts/components/document_title'; import { DocumentTitle } from 'ts/components/document_title';
import { Section, SectionProps } from 'ts/components/newLayout'; import { Section } from 'ts/components/newLayout';
import { Heading, Paragraph } from 'ts/components/text'; import { Heading, Paragraph } from 'ts/components/text';
import { colors } from 'ts/style/colors'; import { colors } from 'ts/style/colors';
import { WebsitePaths } from 'ts/types';
import { documentConstants } from 'ts/utils/document_meta_constants'; import { documentConstants } from 'ts/utils/document_meta_constants';
interface Props { export const DocsHome: React.FC = () => {
location: Location; return (
theme: { <SiteWrap theme="light">
bgColor: string; <DocumentTitle {...documentConstants.DOCS} />
textColor: string; <Hero isHome={true} title="0x Docs" />
linkColor: string; <Section maxWidth="1150px" isPadded={false} padding="0">
}; <ShortcutsWrapper>
} {shortcuts.map((shortcut, index) => (
<ShortcutLink key={`shortcut-${index}`} {...shortcut} />
))}
</ShortcutsWrapper>
<Separator />
<GetStartedWrapper>
<div>
<Heading size="default">Get Started</Heading>
{getStartedLinks.map((link, index) => (
<Fragment key={`get-started-${index}`}>
<Button color={colors.brandDark} href={link.url} isWithArrow={true}>
{link.heading}
</Button>
<Paragraph color={colors.textDarkPrimary} isMuted={1}>
{link.description}
</Paragraph>
</Fragment>
))}
</div>
<div>
<Heading size="default">Useful Links</Heading>
<StepLinks links={usefulLinks} />
</div>
</GetStartedWrapper>
<Separator />
<CommunityWrapper>
{communityShortcuts.map((shortcut, index) => (
<CommunityLink key={`communityLink-${index}`} {...shortcut} />
))}
</CommunityWrapper>
</Section>
</SiteWrap>
);
};
const ShortcutsWrapper = styled.div`
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 30px;
grid-row-gap: 30px;
`;
const CommunityWrapper = styled.div`
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 30px;
grid-row-gap: 30px;
`;
const GetStartedWrapper = styled.div`
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 70px;
grid-row-gap: 30px;
`;
const Separator = styled.hr`
border-width: 0 0 1px;
border-color: #e4e4e4;
height: 0;
margin: 60px 0;
`;
const shortcuts: LinkProps[] = [ const shortcuts: LinkProps[] = [
{ {
@@ -120,78 +178,3 @@ const communityShortcuts: CommunityLinkProps[] = [
url: '/docs/get-started', url: '/docs/get-started',
}, },
]; ];
export class DocsHome extends React.Component<Props> {
public state = {};
public componentDidMount(): void {}
public render(): React.ReactNode {
return (
<SiteWrap theme="light">
<DocumentTitle {...documentConstants.DOCS} />
<Hero isHome={true} title="0x Docs" />
<Section maxWidth={'1150px'} isPadded={false} padding="0 0">
<ShortcutsWrapper>
{shortcuts.map((shortcut, index) => (
<ShortcutLink key={`shortcut-${index}`} {...shortcut} />
))}
</ShortcutsWrapper>
<Separator />
<Columns>
<div>
<Heading size="default">Get Started</Heading>
{getStartedLinks.map((link, index) => (
<React.Fragment key={`get-started-${index}`}>
<Button color={colors.brandDark} href={link.url} isWithArrow={true}>{link.heading}</Button>
<Paragraph color={colors.textDarkPrimary} isMuted={1}>{link.description}</Paragraph>
</React.Fragment>
))}
</div>
<div>
<Heading size="default">Useful Links</Heading>
<StepLinks links={usefulLinks} />
</div>
</Columns>
<Separator />
<CommunityWrapper>
{communityShortcuts.map((shortcut, index) => (
<CommunityLink key={`communityLink-${index}`} {...shortcut} />
))}
</CommunityWrapper>
</Section>
</SiteWrap>
);
}
}
const ShortcutsWrapper = styled.div`
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 30px;
grid-row-gap: 30px;
`;
const CommunityWrapper = styled.div`
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 30px;
grid-row-gap: 30px;
`;
const Columns = styled.div<{ count?: number }>`
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 70px;
grid-row-gap: 30px;
`;
Columns.defaultProps = {
count: 2,
};
const Separator = styled.hr`
border-width: 0 0 1px;
border-color: #e4e4e4;
height: 0;
margin-top: 60px;
margin-bottom: 60px;
`;