'use client' import { useEffect, useState } from 'react' interface Heading { id: string text: string level: number } interface TOCProps { headings: Heading[] } export function TableOfContents({ headings }: TOCProps) { const [activeId, setActiveId] = useState('') useEffect(() => { const observer = new IntersectionObserver( entries => { entries.forEach(entry => { if (entry.isIntersecting) { setActiveId(entry.target.id) } }) }, { rootMargin: '-100px 0px -66%' } ) headings.forEach(({ id }) => { const element = document.getElementById(id) if (element) observer.observe(element) }) return () => observer.disconnect() }, [headings]) return ( ) }