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; } export interface OverviewContentState {} export class OverviewContent extends React.Component { public render(): React.ReactNode { return ( {this._renderSectionTitle(this.props.translate.get(Key.StartBuildOn0x, Deco.Cap))} {this._renderSectionDescription(this.props.translate.get(Key.StartBuildOn0xDescription, Deco.Cap))} {_.map(this.props.tutorials, tutorialInfo => ( ))} {this._renderSectionTitle(this.props.translate.get(Key.LibrariesAndTools, Deco.CapWords))} {this._renderSectionDescription( this.props.translate.get(Key.LibrariesAndToolsDescription, Deco.Cap), )} {_.map(this.props.categoryToPackages, (pkgs, category) => this._renderPackageCategory(category, pkgs), )} ); } private _renderPackageCategory(category: string, pkgs: Package[]): React.ReactNode { return ( {category} {_.map(pkgs, pkg => this._renderPackage(pkg))} ); } private _renderPackage(pkg: Package): React.ReactNode { const id = sharedUtils.getIdFromName(pkg.link.title); return ( {pkg.link.title} {this.props.translate.get(Key.More, Deco.Cap)} ); } private _renderSectionTitle(text: string): React.ReactNode { return ( {text} ); } private _renderSectionDescription(text: string): React.ReactNode { return ( {text} ); } } // tslint:disable:max-file-line-count