docusaurus/packages/docusaurus/lib/theme/DocsPaginator/index.js

/**
 * Copyright (c) 2017-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

import React, {useContext} from 'react';
import Link from '@docusaurus/Link';

import DocusaurusContext from '@docusaurus/context';

import styles from './styles.module.css';

function DocsPaginator() {
  const context = useContext(DocusaurusContext);
  const {docsMetadata, metadata} = context;
  if (!metadata || !docsMetadata) {
    return null;
  }
  const {docs} = docsMetadata;

  return (
    <div className={styles.paginatorContainer}>
      <div>
        {metadata.previous && docs[metadata.previous] && (
          <Link
            className={styles.paginatorLink}
            to={docs[metadata.previous].permalink}>
            <svg className={styles.arrow} viewBox="0 0 24 24">
              <g>
                <line x1="19" y1="12" x2="5" y2="12" />
                <polyline points="12 19 5 12 12 5" />
              </g>
            </svg>{' '}
            <span className={styles.label}>{metadata.previous_title}</span>
          </Link>
        )}
      </div>
      <div className={styles.paginatorRightContainer}>
        {metadata.next && docs[metadata.next] && (
          <Link
            className={styles.paginatorLink}
            to={docs[metadata.next].permalink}>
            <span className={styles.label}>{metadata.next_title}</span>{' '}
            <svg className={styles.arrow} viewBox="0 0 24 24">
              <g>
                <line x1="5" y1="12" x2="19" y2="12" />
                <polyline points="12 5 19 12 12 19" />
              </g>
            </svg>
          </Link>
        )}
      </div>
    </div>
  );
}

export default DocsPaginator;