DashboardTableOfContents() — ui Function Reference

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

Function tsx ComponentRegistry UIPrimitives calls 1

Entity Profile

ComponentRegistry→ UIPrimitives→ DashboardTableOfContents() — ui Function Reference

Dependency Diagram

graph TD
  02e128f4_4a26_1145_9ae1_7b4be4c61adb["DashboardTableOfContents()"]
  9b842276_9b99_ba90_8b96_066d8d6fcd62["toc.tsx"]
  02e128f4_4a26_1145_9ae1_7b4be4c61adb -->|defined in| 9b842276_9b99_ba90_8b96_066d8d6fcd62
  904b0d29_b0f1_e8cb_22ca_c7180b344b79["useActiveItem()"]
  02e128f4_4a26_1145_9ae1_7b4be4c61adb -->|calls| 904b0d29_b0f1_e8cb_22ca_c7180b344b79
  style 02e128f4_4a26_1145_9ae1_7b4be4c61adb fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/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?.length) {
    return null
  }

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