diff options
author | Fabio Berger <me@fabioberger.com> | 2018-10-17 06:25:51 +0800 |
---|---|---|
committer | Fabio Berger <me@fabioberger.com> | 2018-10-17 06:25:51 +0800 |
commit | fdefa5952cb6cb6e1dce42e862dbc676690cdcbb (patch) | |
tree | 2643c34cdf0006dc743ce99cfebdfe957c178d37 /packages/website/ts/components/documentation/sidebar_header.tsx | |
parent | 7f2636fd05cdab3addd58f340bf25d93c3a59d00 (diff) | |
download | dexon-0x-contracts-fdefa5952cb6cb6e1dce42e862dbc676690cdcbb.tar dexon-0x-contracts-fdefa5952cb6cb6e1dce42e862dbc676690cdcbb.tar.gz dexon-0x-contracts-fdefa5952cb6cb6e1dce42e862dbc676690cdcbb.tar.bz2 dexon-0x-contracts-fdefa5952cb6cb6e1dce42e862dbc676690cdcbb.tar.lz dexon-0x-contracts-fdefa5952cb6cb6e1dce42e862dbc676690cdcbb.tar.xz dexon-0x-contracts-fdefa5952cb6cb6e1dce42e862dbc676690cdcbb.tar.zst dexon-0x-contracts-fdefa5952cb6cb6e1dce42e862dbc676690cdcbb.zip |
chore: componentize the sidebar header
Diffstat (limited to 'packages/website/ts/components/documentation/sidebar_header.tsx')
-rw-r--r-- | packages/website/ts/components/documentation/sidebar_header.tsx | 57 |
1 files changed, 57 insertions, 0 deletions
diff --git a/packages/website/ts/components/documentation/sidebar_header.tsx b/packages/website/ts/components/documentation/sidebar_header.tsx new file mode 100644 index 000000000..ec0ada8bd --- /dev/null +++ b/packages/website/ts/components/documentation/sidebar_header.tsx @@ -0,0 +1,57 @@ +import { colors } from '@0xproject/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" + > + {title} + </Text> + </Container> + {!_.isUndefined(docsVersion) && + !_.isUndefined(availableDocVersions) && + !_.isUndefined(onVersionSelected) && ( + <div className="right" style={{ alignSelf: 'flex-end' }}> + <VersionDropDown + selectedVersion={docsVersion} + versions={availableDocVersions} + onVersionSelected={onVersionSelected} + /> + </div> + )} + </Container> + <Container + width={'100%'} + height={'1px'} + backgroundColor={colors.grey300} + marginTop="20px" + marginBottom="27px" + /> + </Container> + ); +}; |