feat: add table of content element

src/components/TOC.astro

@@ -0,0 +1,36 @@
+---
+import { useTranslations } from "@i18n/utils";
+import type { MarkdownHeading } from "astro";
+const t = useTranslations(Astro.url);
+
+type Props = {
+  headings: MarkdownHeading[];
+};
+
+const { headings } = Astro.props;
+---
+
+<div class="toc-wrapper lg:fixed lg:left-6 lg:top-6">
+  <details
+    class="py-2 px-4 rounded-xl border border-neutral flex flex-col bg gap-2"
+  >
+    <summary class="text-lg cursor-pointer select-none"
+      >{t("toc.title")}</summary
+    >
+    <div class="flex flex-col gap-[2px] my-2">
+      {
+        headings.map((heading) => {
+          return (
+            <a
+              href={`#${heading.slug}`}
+              style={{ marginLeft: `${(heading.depth - 1) * 1}rem` }}
+              class={`block text my-0`}
+            >
+              {heading.text}
+            </a>
+          );
+        })
+      }
+    </div>
+  </details>
+</div>