Home / Function/ DashboardTableOfContents() — supabase Function Reference

DashboardTableOfContents() — supabase Function Reference

Architecture documentation for the DashboardTableOfContents() function in toc.tsx from the supabase codebase.

Function tsx DesignSystem ComponentRegistry calls 2

Entity Profile

Dependency Diagram

graph TD
  8d0a2728_f944_370c_62be_f78aabddbbd3["DashboardTableOfContents()"]
  01aed1eb_a147_0274_089a_456b5b8b04fb["useActiveItem()"]
  8d0a2728_f944_370c_62be_f78aabddbbd3 -->|calls| 01aed1eb_a147_0274_089a_456b5b8b04fb
  01ea1769_684b_3d4b_be4f_d9a9561ce00d["useMounted()"]
  8d0a2728_f944_370c_62be_f78aabddbbd3 -->|calls| 01ea1769_684b_3d4b_be4f_d9a9561ce00d
  style 8d0a2728_f944_370c_62be_f78aabddbbd3 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/design-system/components/toc.tsx lines 14–39

export function DashboardTableOfContents({ toc }: TocProps) {
  const itemIds = React.useMemo(
    () =>
      toc.items
        ? toc.items
            .flatMap((item) => [item.url, item?.items?.map((item) => item.url)])
            .flat()
            .filter(Boolean)
            .map((id) => id?.split('#')[1])
        : [],
    [toc]
  )
  const activeHeading = useActiveItem(itemIds)
  const mounted = useMounted()

  if (!toc?.items || !mounted) {
    return null
  }

  return (
    <div className="space-y-2">
      <p className="font-medium text-foreground-light">On This Page</p>
      <Tree tree={toc} activeItem={activeHeading} />
    </div>
  )
}

Domain

Subdomains

Calls

Source

Frequently Asked Questions

What does DashboardTableOfContents() do?
DashboardTableOfContents() is a function in the supabase codebase.
What does DashboardTableOfContents() call?
DashboardTableOfContents() calls 2 function(s): useActiveItem, useMounted.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free