services/blog/nuldoc-src/components/TableOfContents.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
32
33

import { TocEntry, TocRoot } from "../djot/document.ts";

type Props = {
  toc: TocRoot;
};

export default function TableOfContents({ toc }: Props) {
  return (
    <nav className="toc">
      <h2>目次</h2>
      <ul>
        {toc.entries.map((entry, index) => (
          <TocEntryComponent key={String(index)} entry={entry} />
        ))}
      </ul>
    </nav>
  );
}

function TocEntryComponent({ entry }: { entry: TocEntry }) {
  return (
    <li>
      <a href={`#${entry.id}`}>{entry.text}</a>
      {entry.children.length > 0 && (
        <ul>
          {entry.children.map((child, index) => (
            <TocEntryComponent key={String(index)} entry={child} />
          ))}
        </ul>
      )}
    </li>
  );
}