src/components/ToC/ToC.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

import { t } from '@lingui/macro';
import { Heading } from '@ts/types/app';
import { slugify } from '@utils/helpers/slugify';
import useHeadingsTree from '@utils/hooks/useHeadingsTree';

const ToC = () => {
  const headingsTree = useHeadingsTree('article');
  const title = t`Table of contents`;

  const getItems = (headings: Heading[]) => {
    return headings.map((heading) => {
      if (heading.id === slugify(title)) return;

      return (
        <li key={heading.id}>
          <a href={`#${heading.id}`}>{heading.title}</a>
          {heading.children.length > 0 && <ol>{getItems(heading.children)}</ol>}
        </li>
      );
    });
  };

  return (
    <>
      <h2>{title}</h2>
      <ol>{getItems(headingsTree)}</ol>
    </>
  );
};

export default ToC;