'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 ( ) }