aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2018-10-17 06:25:51 +0800
committerFabio Berger <me@fabioberger.com>2018-10-17 06:25:51 +0800
commitfdefa5952cb6cb6e1dce42e862dbc676690cdcbb (patch)
tree2643c34cdf0006dc743ce99cfebdfe957c178d37 /packages/website/ts/components
parent7f2636fd05cdab3addd58f340bf25d93c3a59d00 (diff)
downloaddexon-sol-tools-fdefa5952cb6cb6e1dce42e862dbc676690cdcbb.tar
dexon-sol-tools-fdefa5952cb6cb6e1dce42e862dbc676690cdcbb.tar.gz
dexon-sol-tools-fdefa5952cb6cb6e1dce42e862dbc676690cdcbb.tar.bz2
dexon-sol-tools-fdefa5952cb6cb6e1dce42e862dbc676690cdcbb.tar.lz
dexon-sol-tools-fdefa5952cb6cb6e1dce42e862dbc676690cdcbb.tar.xz
dexon-sol-tools-fdefa5952cb6cb6e1dce42e862dbc676690cdcbb.tar.zst
dexon-sol-tools-fdefa5952cb6cb6e1dce42e862dbc676690cdcbb.zip
chore: componentize the sidebar header
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r--packages/website/ts/components/documentation/sidebar_header.tsx57
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>
+ );
+};