From 5bc3616dec5f520e6ee314a1f3d81c97fbfdc65e Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Tue, 16 Sep 2025 13:27:45 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Add=20Table=20of=20Contents=20co?=
 =?UTF-8?q?mponent=20and=20type=20definitions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../tableOfContents/tableOfContents.svelte    | 28 +++++++++++++++++++
 src/components/tableOfContents/toc.types.ts   |  6 ++++
 2 files changed, 34 insertions(+)
 create mode 100644 src/components/tableOfContents/tableOfContents.svelte
 create mode 100644 src/components/tableOfContents/toc.types.ts

diff --git a/src/components/tableOfContents/tableOfContents.svelte b/src/components/tableOfContents/tableOfContents.svelte
new file mode 100644
index 0000000..aadae76
--- /dev/null
+++ b/src/components/tableOfContents/tableOfContents.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type { TableOfContentsProps } from "./toc.types";
+  import { cn } from "@/utils/cn";
+
+  let { toc, className }: TableOfContentsProps = $props();
+</script>
+
+<div
+  class={cn(
+    "flex flex-col text-sm text-neutral-600 dark:text-neutral-400",
+    className,
+  )}
+>
+  {#each toc as tocItem (tocItem.id)}
+    <a
+      href={"#" + tocItem.slug}
+      class={cn(
+        "pt-1 pb-1.5 transition-colors hover:text-neutral-900 dark:hover:text-neutral-50",
+        tocItem.level === 2 && "ml-0 font-medium",
+        tocItem.level === 3 &&
+          "border-l border-neutral-200 pl-4 dark:border-neutral-800",
+        tocItem.level === 4 && "ml-8",
+      )}
+    >
+      {tocItem.text}
+    </a>
+  {/each}
+</div>
diff --git a/src/components/tableOfContents/toc.types.ts b/src/components/tableOfContents/toc.types.ts
new file mode 100644
index 0000000..e6547ac
--- /dev/null
+++ b/src/components/tableOfContents/toc.types.ts
@@ -0,0 +1,6 @@
+import type { ToCItem } from "@/markdown/generateToC";
+
+export interface TableOfContentsProps {
+  toc: ToCItem[];
+  className?: string;
+}