Feat : Gitbook

2026-09-22 13:38:31 +00:00 · 2026-05-11 11:50:24 +07:00
parent 7ad538bcf2
commit fd92af77a0
124 changed files with 34154 additions and 4 deletions
@@ -0,0 +1,59 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { List } from "lucide-react";
+
+export default function DocsToc({ headings }) {
+  const [activeId, setActiveId] = useState("");
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setActiveId(entry.target.id);
+          }
+        });
+      },
+      { rootMargin: "-80px 0px -80% 0px" }
+    );
+
+    headings.forEach(({ id }) => {
+      const element = document.getElementById(id);
+      if (element) observer.observe(element);
+    });
+
+    return () => observer.disconnect();
+  }, [headings]);
+
+  if (!headings || headings.length === 0) return null;
+
+  return (
+    <aside className="hidden xl:block w-64 border-l bg-white border-gray-200 h-[calc(100vh-4rem)] sticky top-16 overflow-y-auto">
+      <nav className="p-4">
+        <h3 className="flex items-center gap-2 text-sm font-semibold text-gray-900 mb-3">
+          <List className="w-4 h-4" />
+          On this page
+        </h3>
+        <ul className="space-y-2">
+          {headings.map((heading, idx) => (
+            <li key={`${heading.id}-${idx}`}>
+              <a
+                href={`#${heading.id}`}
+                className={`block text-sm transition-colors ${
+                  heading.level === 3 ? "pl-4" : ""
+                } ${
+                  activeId === heading.id
+                    ? "text-[#E68A6E] font-medium"
+                    : "text-gray-600 hover:text-gray-900"
+                }`}
+              >
+                {heading.text}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </aside>
+  );
+}