"use client" import { useEffect, useState } from "react" // third-party import { cn } from "cn" interface TocItem { title: string url: string items?: TocItem[] } interface TableOfContentsProps { items: TocItem[] } // ------------------------------ | LAYOUT - TABLE OF CONTENTS | ------------------------------ // export default function TableOfContents({ items }: TableOfContentsProps) { const [activeId, setActiveId] = useState(null) useEffect(() => { const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { setActiveId(entry.target.id) } }) }, { rootMargin: "0% 0% -80% 0%" } ) items.forEach((item) => { const element = document.getElementById(item.url.replace("#", "")) if (element) observer.observe(element) item.items?.forEach((subItem) => { const subElement = document.getElementById(subItem.url.replace("#", "")) if (subElement) observer.observe(subElement) }) }) return () => observer.disconnect() }, [items]) return (

{item.title} {item.items && item.items.length > 0 && (
- {subItem.title}
)}

) }