Table of Contents

1"use client"
2 
3import { useEffect, useState, useCallback } from "react"
4import { cn } from "@/lib/utils"
5import { TableOfContentsIcon } from "lucide-react"
6 
7export interface TocItem {
8  id: string
9  title: string
10  level?: number
11}
12 
13interface TableOfContentsProps {
14  items: TocItem[]
15  className?: string
16}
17 
18function useActiveSection(itemIds: string[]) {
19  const [activeId, setActiveId] = useState<string>("")
20 
21  useEffect(() => {
22    if (itemIds.length === 0) return
23 
24    const observer = new IntersectionObserver(
25      (entries) => {
26        entries.forEach((entry) => {
27          if (entry.isIntersecting) {
28            setActiveId(entry.target.id)
29          }
30        })
31      },
32      {
33        rootMargin: "-80px 0px -80% 0px",
34        threshold: 0,
35      }
36    )
37 
38    itemIds.forEach((id) => {
39      const element = document.getElementById(id)
40      if (element) {
41        observer.observe(element)
42      }
43    })
44 
45    return () => observer.disconnect()
46  }, [itemIds])
47 
48  return activeId
49}
50 
51function TableOfContents({ items, className }: TableOfContentsProps) {
52  const itemIds = items.map((item) => item.id)
53  const activeId = useActiveSection(itemIds)
54 
55  const scrollToSection = useCallback((id: string) => {
56    const element = document.getElementById(id)
57    if (element) {
58      element.scrollIntoView({ behavior: "smooth" })
59    }
60  }, [])
61 
62  if (items.length === 0) {
63    return null
64  }
65 
66  return (
67    <nav className={cn("relative", className)}>
68      <div className="flex items-center gap-2 mb-3">
69        <TableOfContentsIcon className="h-4 w-4 text-muted-foreground" />
70        <p className="text-xs font-semibold text-muted-foreground tracking-wide">
71          on this page
72        </p>
73      </div>
74 
75      <ul className="space-y-1 border-l border-border">
76        {items.map(({ id, title, level = 1 }) => {
77          const isActive = activeId === id
78          const isChild = level > 1
79 
80          return (
81            <li key={id}>
82              <button
83                onClick={() => scrollToSection(id)}
84                className={cn(
85                  "flex items-center w-full text-left text-[13px] py-1 -ml-px border-l transition-colors",
86                  level === 1 && "pl-3 font-medium",
87                  level === 2 && "pl-5 text-xs",
88                  isActive
89                    ? "border-foreground text-foreground"
90                    : "border-transparent text-muted-foreground hover:text-foreground hover:border-muted-foreground"
91                )}
92// … truncated