toc.tsx — ui Source File

Architecture documentation for toc.tsx, a tsx file in the ui codebase. 4 imports, 0 dependents.

File tsx ComponentRegistry UIPrimitives 4 imports 3 functions

Entity Profile

ComponentRegistry→ UIPrimitives→ toc.tsx — ui Source File

Dependency Diagram

graph LR
  9b842276_9b99_ba90_8b96_066d8d6fcd62["toc.tsx"]
  1d141819_425e_b5fd_4c8e_32f7c6a42cf2["react"]
  9b842276_9b99_ba90_8b96_066d8d6fcd62 --> 1d141819_425e_b5fd_4c8e_32f7c6a42cf2
  937365d6_ee26_d0ac_e1f6_394c266cb962["toc"]
  9b842276_9b99_ba90_8b96_066d8d6fcd62 --> 937365d6_ee26_d0ac_e1f6_394c266cb962
  79081a1f_55a3_945a_fb8c_d53d6d3eab81["utils"]
  9b842276_9b99_ba90_8b96_066d8d6fcd62 --> 79081a1f_55a3_945a_fb8c_d53d6d3eab81
  47758573_16e6_4808_88b2_8dba3780ae24["use-mounted"]
  9b842276_9b99_ba90_8b96_066d8d6fcd62 --> 47758573_16e6_4808_88b2_8dba3780ae24
  style 9b842276_9b99_ba90_8b96_066d8d6fcd62 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

// @ts-nocheck
"use client"

import * as React from "react"

import { TableOfContents } from "@/lib/toc"
import { cn } from "@/lib/utils"
import { useMounted } from "@/hooks/use-mounted"

interface TocProps {
  toc: TableOfContents
}

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>
  )
}

function useActiveItem(itemIds: string[]) {
  const [activeId, setActiveId] = React.useState(null)

  React.useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            setActiveId(entry.target.id)
          }
        })
      },
      { rootMargin: `0% 0% -80% 0%` }
    )

    itemIds?.forEach((id) => {
      const element = document.getElementById(id)
      if (element) {
        observer.observe(element)
      }
    })

    return () => {
      itemIds?.forEach((id) => {
        const element = document.getElementById(id)
        if (element) {
          observer.unobserve(element)
        }
      })
    }
  }, [itemIds])

  return activeId
}

interface TreeProps {
  tree: TableOfContents
  level?: number
  activeItem?: string
}

function Tree({ tree, level = 1, activeItem }: TreeProps) {
  return tree?.items?.length && level < 3 ? (
    <ul className={cn("m-0 list-none", { "pl-4": level !== 1 })}>
      {tree.items.map((item, index) => {
        return (
          <li key={index} className={cn("mt-0 pt-2")}>
            <a
              href={item.url}
              className={cn(
                "inline-block no-underline transition-colors hover:text-foreground",
                item.url === `#${activeItem}`
                  ? "font-medium text-foreground"
                  : "text-muted-foreground"
              )}
            >
              {item.title}
            </a>
            {item.items?.length ? (
              <Tree tree={item} level={level + 1} activeItem={activeItem} />
            ) : null}
          </li>
        )
      })}
    </ul>
  ) : null
}