aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/documentation/sidebar_header.tsx
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>
    );
};