1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
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
|
