blob: 9ced52c74a3dbe72a3231cd84eb9edc343fcb782 (
plain) (
blame)
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
|
import { colors } from '@0x/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import { VersionDropDown } from 'ts/components/documentation/version_drop_down';
import { Container } from 'ts/components/ui/container';
import { Text } from 'ts/components/ui/text';
import { ScreenWidths } from 'ts/types';
export interface SidebarHeaderProps {
screenWidth: ScreenWidths;
title: string;
docsVersion?: string;
availableDocVersions?: string[];
onVersionSelected?: () => void;
}
export const SidebarHeader: React.StatelessComponent<SidebarHeaderProps> = ({
screenWidth,
title,
docsVersion,
availableDocVersions,
onVersionSelected,
}) => {
return (
<Container>
<Container className="flex justify-bottom">
<Container className="left pl1" width="150px">
<Text
fontColor={colors.lightLinkBlue}
fontSize={screenWidth === ScreenWidths.Sm ? '20px' : '22px'}
fontWeight="bold"
lineHeight="26px"
>
{title}
</Text>
</Container>
{!_.isUndefined(docsVersion) &&
!_.isUndefined(availableDocVersions) &&
!_.isUndefined(onVersionSelected) && (
<div className="right" style={{ alignSelf: 'flex-end', paddingBottom: 4 }}>
<VersionDropDown
selectedVersion={docsVersion}
versions={availableDocVersions}
onVersionSelected={onVersionSelected}
/>
</div>
)}
</Container>
<Container
width={'100%'}
height={'1px'}
backgroundColor={colors.grey300}
marginTop="20px"
marginBottom="27px"
/>
</Container>
);
};
|
