59 lines
1.7 KiB
JavaScript
59 lines
1.7 KiB
JavaScript
"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>
|
|
);
|
|
}
|