TocComponent() — supabase Function Reference

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

Function tsx DesignSystem ComponentRegistry calls 1

Entity Profile

DesignSystem→ ComponentRegistry→ TocComponent() — supabase Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/design-system/registry/default/example/toc-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>
  )
}