Refactor Home so that Dev section chrome is reusable across pages

1 files changed, 132 insertions, 0 deletions

diff --git a/packages/website/ts/components/documentation/overview_content.tsx b/packages/website/ts/components/documentation/overview_content.tsx
new file mode 100644
index 000000000..aa132a80f
--- /dev/null
+++ b/packages/website/ts/components/documentation/overview_content.tsx
@@ -0,0 +1,132 @@
+import { colors, Link, MarkdownLinkBlock, utils as sharedUtils } from '@0xproject/react-shared';
+import { ObjectMap } from '@0xproject/types';
+import * as _ from 'lodash';
+import * as React from 'react';
+import * as ReactMarkdown from 'react-markdown';
+import { Element as ScrollElement } from 'react-scroll';
+import { TutorialButton } from 'ts/components/documentation/tutorial_button';
+import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
+import { Deco, Key, Package, TutorialInfo } from 'ts/types';
+import { Translate } from 'ts/utils/translate';
+
+export interface OverviewContentProps {
+    translate: Translate;
+    tutorials: TutorialInfo[];
+    categoryToPackages: ObjectMap<Package[]>;
+}
+
+export interface OverviewContentState {}
+
+export class OverviewContent extends React.Component<OverviewContentProps, OverviewContentState> {
+    public render(): React.ReactNode {
+        return (
+            <Container>
+                {this._renderSectionTitle(this.props.translate.get(Key.StartBuildOn0x, Deco.Cap))}
+                <Container paddingTop="12px">
+                    {this._renderSectionDescription(this.props.translate.get(Key.StartBuildOn0xDescription, Deco.Cap))}
+                    <Container marginTop="36px">
+                        {_.map(this.props.tutorials, tutorialInfo => (
+                            <ScrollElement
+                                name={sharedUtils.getIdFromName(
+                                    this.props.translate.get(tutorialInfo.link.title as Key, Deco.Cap),
+                                )}
+                                key={`tutorial-${tutorialInfo.link.title}`}
+                            >
+                                <TutorialButton translate={this.props.translate} tutorialInfo={tutorialInfo} />
+                            </ScrollElement>
+                        ))}
+                    </Container>
+                </Container>
+                <Container marginTop="32px" paddingBottom="100px">
+                    {this._renderSectionTitle(this.props.translate.get(Key.LibrariesAndTools, Deco.CapWords))}
+                    <Container paddingTop="12px">
+                        {this._renderSectionDescription(
+                            this.props.translate.get(Key.LibrariesAndToolsDescription, Deco.Cap),
+                        )}
+                        <Container marginTop="36px">
+                            {_.map(this.props.categoryToPackages, (pkgs, category) =>
+                                this._renderPackageCategory(category, pkgs),
+                            )}
+                        </Container>
+                    </Container>
+                </Container>
+            </Container>
+        );
+    }
+    private _renderPackageCategory(category: string, pkgs: Package[]): React.ReactNode {
+        return (
+            <Container key={`category-${category}`}>
+                <Text fontSize="18px">{category}</Text>
+                <Container>{_.map(pkgs, pkg => this._renderPackage(pkg))}</Container>
+            </Container>
+        );
+    }
+    private _renderPackage(pkg: Package): React.ReactNode {
+        const id = sharedUtils.getIdFromName(pkg.link.title);
+        return (
+            <ScrollElement name={id} key={`package-${pkg.link.title}`}>
+                <Container className="pb2">
+                    <Container width="100%" height="1px" backgroundColor={colors.grey300} marginTop="11px" />
+                    <Container className="clearfix mt2 pt1">
+                        <Container className="md-col lg-col md-col-4 lg-col-4">
+                            <Link
+                                to={pkg.link.to}
+                                fontColor={colors.lightLinkBlue}
+                                shouldOpenInNewTab={!!pkg.link.shouldOpenInNewTab}
+                            >
+                                <Text Tag="div" fontColor={colors.lightLinkBlue} fontWeight="bold">
+                                    {pkg.link.title}
+                                </Text>
+                            </Link>
+                        </Container>
+                        <Container className="md-col lg-col md-col-6 lg-col-6 sm-py2">
+                            <Text fontColor={colors.grey700}>
+                                <ReactMarkdown
+                                    source={pkg.description}
+                                    renderers={{
+                                        link: MarkdownLinkBlock,
+                                        paragraph: 'span',
+                                    }}
+                                />
+                            </Text>
+                        </Container>
+                        <Container className="md-col lg-col md-col-2 lg-col-2 sm-pb2 relative">
+                            <Container position="absolute" right="0px">
+                                <Link
+                                    to={pkg.link.to}
+                                    fontColor={colors.lightLinkBlue}
+                                    shouldOpenInNewTab={!!pkg.link.shouldOpenInNewTab}
+                                >
+                                    <Container className="flex">
+                                        <Container>{this.props.translate.get(Key.More, Deco.Cap)}</Container>
+                                        <Container paddingTop="1px" paddingLeft="6px">
+                                            <i
+                                                className="zmdi zmdi-chevron-right bold"
+                                                style={{ fontSize: 18, color: colors.lightLinkBlue }}
+                                            />
+                                        </Container>
+                                    </Container>
+                                </Link>
+                            </Container>
+                        </Container>
+                    </Container>
+                </Container>
+            </ScrollElement>
+        );
+    }
+    private _renderSectionTitle(text: string): React.ReactNode {
+        return (
+            <Text fontColor={colors.projectsGrey} fontSize="30px" fontWeight="bold">
+                {text}
+            </Text>
+        );
+    }
+    private _renderSectionDescription(text: string): React.ReactNode {
+        return (
+            <Text fontColor={colors.linkSectionGrey} fontSize="16px" fontFamily="Roboto Mono">
+                {text}
+            </Text>
+        );
+    }
+} // tslint:disable:max-file-line-count