aboutsummaryrefslogtreecommitdiffstats
path: root/packages/react-shared/src/ts/components/section_header.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/react-shared/src/ts/components/section_header.tsx')
-rw-r--r--packages/react-shared/src/ts/components/section_header.tsx65
1 files changed, 65 insertions, 0 deletions
diff --git a/packages/react-shared/src/ts/components/section_header.tsx b/packages/react-shared/src/ts/components/section_header.tsx
new file mode 100644
index 000000000..90fabf9ff
--- /dev/null
+++ b/packages/react-shared/src/ts/components/section_header.tsx
@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { Element as ScrollElement } from 'react-scroll';
+
+import { HeaderSizes } from '../types';
+import { colors } from '../utils/colors';
+import { utils } from '../utils/utils';
+
+import { AnchorTitle } from './anchor_title';
+
+export interface SectionHeaderProps {
+ sectionName: string;
+ headerSize?: HeaderSizes;
+}
+
+export interface SectionHeaderState {
+ shouldShowAnchor: boolean;
+}
+
+export class SectionHeader extends React.Component<SectionHeaderProps, SectionHeaderState> {
+ public static defaultProps: Partial<SectionHeaderProps> = {
+ headerSize: HeaderSizes.H2,
+ };
+ constructor(props: SectionHeaderProps) {
+ super(props);
+ this.state = {
+ shouldShowAnchor: false,
+ };
+ }
+ public render() {
+ const sectionName = this.props.sectionName.replace(/-/g, ' ');
+ const id = utils.getIdFromName(sectionName);
+ return (
+ <div
+ onMouseOver={this._setAnchorVisibility.bind(this, true)}
+ onMouseOut={this._setAnchorVisibility.bind(this, false)}
+ >
+ <ScrollElement name={id}>
+ <AnchorTitle
+ headerSize={this.props.headerSize}
+ title={
+ <span
+ style={{
+ textTransform: 'uppercase',
+ color: colors.grey,
+ fontFamily: 'Roboto Mono',
+ fontWeight: 300,
+ fontSize: 27,
+ }}
+ >
+ {sectionName}
+ </span>
+ }
+ id={id}
+ shouldShowAnchor={this.state.shouldShowAnchor}
+ />
+ </ScrollElement>
+ </div>
+ );
+ }
+ private _setAnchorVisibility(shouldShowAnchor: boolean) {
+ this.setState({
+ shouldShowAnchor,
+ });
+ }
+}