ContentBox.js

import * as React from 'react';
import clsx from 'clsx';
import styles from './ContentBox.css';

export function ContentBox({className, children, style}) {
  return (
    <div className={clsx(styles.ContentBox, className)} style={style}>
      {children}
    </div>
  );
}

export function ContentBoxHeader({text, sourceLink, docsLink}) {
  const links = [];

  if (sourceLink) {
    links.push(
      <a className={styles.Link} href={sourceLink} key="sourceLink">
        Source
      </a>,
    );
  }

  if (sourceLink && docsLink) {
    links.push(<span key="separator"> | </span>);
  }

  if (docsLink) {
    links.push(
      <a className={styles.Link} href={docsLink} key="docsLink">
        Docs
      </a>,
    );
  }

  return (
    <h1 className={styles.Header}>
      {text}

      {links.length > 0 && <small className={styles.Small}>{links}</small>}
    </h1>
  );
}

export function ContentBoxParagraph({children}) {
  return <div className={styles.Paragraph}>{children}</div>;
}