chore: add a table of contents

1 files changed, 31 insertions, 0 deletions

diff --git a/src/components/ToC/ToC.tsx b/src/components/ToC/ToC.tsx
new file mode 100644
index 0000000..e7aafa5
--- /dev/null
+++ b/src/components/ToC/ToC.tsx
@@ -0,0 +1,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;