TocComponent() — supabase Function Reference

Architecture documentation for the TocComponent() function in toc-single-demo.tsx from the supabase codebase.

Function tsx DesignSystem ComponentRegistry calls 1

Entity Profile

DesignSystem→ ComponentRegistry→ TocComponent() — supabase Function Reference

Dependency Diagram

graph TD
  c2aab13b_fc36_f221_1111_6c03139d562f["TocComponent()"]
  6af34446_ebe5_8dc0_f42d_66ff7e71f4e1["useTocAnchors()"]
  c2aab13b_fc36_f221_1111_6c03139d562f -->|calls| 6af34446_ebe5_8dc0_f42d_66ff7e71f4e1
  style c2aab13b_fc36_f221_1111_6c03139d562f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/design-system/registry/default/example/toc-single-demo.tsx lines 144–157

const TocComponent = () => {
  const { toc } = useTocAnchors()

  return (
    <Toc className="sticky top-0 border-l">
      <h3 className="inline-flex items-center gap-1.5 font-mono text-xs uppercase text-foreground pl-[calc(1.5rem+6px)]">
        On this page
      </h3>
      <TOCScrollArea className="-ml-[2px]">
        <TOCItems items={toc} />
      </TOCScrollArea>
    </Toc>
  )
}