OnThisPage

// docs/components/CustomTOC.tsx
import { useRef } from 'react'
import {
  OnThisPage,
  AnchorProvider,
  ScrollProvider,
  useActiveAnchors,
} from 'boltdocs/primitives'
import { useRoutes } from 'boltdocs/client'

export default function CustomTOC() {
  const { currentRoute } = useRoutes()
  const scrollContainerRef = useRef<HTMLDivElement>(null)

  const headings = currentRoute?.headings || []
  if (headings.length === 0) return null

  // Convert the headings database to a standard TOC structure
  const tocItems = headings.map((h) => ({
    title: h.text,
    url: `#${h.id}`,
    depth: h.level,
  }))

  return (
    <OnThisPage className="hidden xl:block w-toc py-4 pl-6 pr-4">
      {/* 1. Static Title Header */}
      <OnThisPage.Header className="text-xs font-bold uppercase tracking-wider text-muted mb-4">
        Table of Contents
      </OnThisPage.Header>

      {/* 2. Scroll Tracker Context Wrapper Providers */}
      <AnchorProvider toc={tocItems} single={false}>
        <ScrollProvider containerRef={scrollContainerRef}>
          {/* 3. Scrollable Viewport */}
          <OnThisPage.Content
            ref={scrollContainerRef}
            className="max-h-[80vh] pb-12"
            fadeClassName="bg-linear-to-b from-transparent to-main"
          >
            {/* 4. List + active-track indicator */}
            <OnThisPage.List className="relative border-l border-subtle space-y-0.5 text-sm">
              <OnThisPage.Indicator className="-left-px w-0.5 rounded-full bg-primary-500" />
              {headings.map((h) => (
                <OnThisPage.Item
                  key={h.id}
                  level={h.level}
                  className="data-[level=3]:pl-3"
                >
                  <OnThisPage.Link
                    href={`#${h.id}`}
                    className="block py-0.5 pl-4 text-[13px] transition-colors text-muted hover:text-body data-active:text-primary-500"
                  >
                    {h.text}
                  </OnThisPage.Link>
                </OnThisPage.Item>
              ))}
            </OnThisPage.List>
          </OnThisPage.Content>
        </ScrollProvider>
      </AnchorProvider>
    </OnThisPage>
  )
}

<OnThisPage.Tree
  headings={headings}
  className="space-y-0.5 text-sm border-l border-subtle"
  itemClassName="data-[level=3]:pl-3"
  linkClassName="block py-0.5 pl-4 text-[13px] transition-colors text-muted hover:text-body data-active:text-primary-500"
  indicatorClassName="-left-px w-0.5 rounded-full bg-primary-500"
  fadeClassName="bg-linear-to-b from-transparent to-main"
/>