aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/documentation/overview_content.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/components/documentation/overview_content.tsx')
-rw-r--r--packages/website/ts/components/documentation/overview_content.tsx134
1 files changed, 0 insertions, 134 deletions
diff --git a/packages/website/ts/components/documentation/overview_content.tsx b/packages/website/ts/components/documentation/overview_content.tsx
deleted file mode 100644
index caabaf874..000000000
--- a/packages/website/ts/components/documentation/overview_content.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import { colors, Link, MarkdownLinkBlock, utils as sharedUtils } from '@0x/react-shared';
-import { ObjectMap } from '@0x/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 (
- <Container paddingTop="30px">
- <Text fontColor={colors.projectsGrey} fontSize="30px" fontWeight="bold">
- {text}
- </Text>
- </Container>
- );
- }
- private _renderSectionDescription(text: string): React.ReactNode {
- return (
- <Text fontColor={colors.linkSectionGrey} fontSize="16px" fontFamily="Roboto Mono">
- {text}
- </Text>
- );
- }
-} // tslint:disable:max-file-line-count