1 files changed, 73 insertions, 0 deletions
diff --git a/packages/react-shared/src/components/section_header.tsx b/packages/react-shared/src/components/section_header.tsx
new file mode 100644
index 000000000..ee34a6c09
--- /dev/null
+++ b/packages/react-shared/src/components/section_header.tsx
@@ -0,0 +1,73 @@
+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;
+}
+
+interface DefaultSectionHeaderProps {
+    headerSize: HeaderSizes;
+}
+
+type PropsWithDefaults = SectionHeaderProps & DefaultSectionHeaderProps;
+
+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, headerSize } = this.props as PropsWithDefaults;
+
+        const finalSectionName = this.props.sectionName.replace(/-/g, ' ');
+        const id = utils.getIdFromName(finalSectionName);
+        return (
+            <div
+                onMouseOver={this._setAnchorVisibility.bind(this, true)}
+                onMouseOut={this._setAnchorVisibility.bind(this, false)}
+            >
+                <ScrollElement name={id}>
+                    <AnchorTitle
+                        headerSize={headerSize}
+                        title={
+                            <span
+                                style={{
+                                    textTransform: 'uppercase',
+                                    color: colors.grey,
+                                    fontFamily: 'Roboto Mono',
+                                    fontWeight: 300,
+                                    fontSize: 27,
+                                }}
+                            >
+                                {finalSectionName}
+                            </span>
+                        }
+                        id={id}
+                        shouldShowAnchor={this.state.shouldShowAnchor}
+                    />
+                </ScrollElement>
+            </div>
+        );
+    }
+    private _setAnchorVisibility(shouldShowAnchor: boolean) {
+        this.setState({
+            shouldShowAnchor,
+        });
+    }
+}