DocsTableOfContents() — ui Function Reference

Architecture documentation for the DocsTableOfContents() function in docs-toc.tsx from the ui codebase.

Function tsx Internationalization RTLLayout calls 1

Entity Profile

Internationalization→ RTLLayout→ DocsTableOfContents() — ui Function Reference

Dependency Diagram

graph TD
  aed6896c_f07c_8f62_8360_451cfdc28e49["DocsTableOfContents()"]
  f778cd42_0f75_bcf6_65b6_85f12ec2ee89["docs-toc.tsx"]
  aed6896c_f07c_8f62_8360_451cfdc28e49 -->|defined in| f778cd42_0f75_bcf6_65b6_85f12ec2ee89
  b58a4e19_a42e_28eb_fff1_d0591aee40bb["useActiveItem()"]
  aed6896c_f07c_8f62_8360_451cfdc28e49 -->|calls| b58a4e19_a42e_28eb_fff1_d0591aee40bb
  style aed6896c_f07c_8f62_8360_451cfdc28e49 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/components/docs-toc.tsx lines 50–126

export function DocsTableOfContents({
  toc,
  variant = "list",
  className,
}: {
  toc: {
    title?: React.ReactNode
    url: string
    depth: number
  }[]
  variant?: "dropdown" | "list"
  className?: string
}) {
  const [open, setOpen] = React.useState(false)
  const itemIds = React.useMemo(
    () => toc.map((item) => item.url.replace("#", "")),
    [toc]
  )
  const activeHeading = useActiveItem(itemIds)

  if (!toc?.length) {
    return null
  }

  if (variant === "dropdown") {
    return (
      <DropdownMenu open={open} onOpenChange={setOpen}>
        <DropdownMenuTrigger asChild>
          <Button
            variant="outline"
            size="sm"
            className={cn("h-8 md:h-7", className)}
          >
            <IconMenu3 /> On This Page
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent
          align="start"
          className="no-scrollbar max-h-[70svh]"
        >
          {toc.map((item) => (
            <DropdownMenuItem
              key={item.url}
              asChild
              onClick={() => {
                setOpen(false)
              }}
              data-depth={item.depth}
              className="data-[depth=3]:pl-6 data-[depth=4]:pl-8"
            >
              <a href={item.url}>{item.title}</a>
            </DropdownMenuItem>
          ))}
        </DropdownMenuContent>
      </DropdownMenu>
    )
  }

  return (
    <div className={cn("flex flex-col gap-2 p-4 pt-0 text-sm", className)}>
      <p className="text-muted-foreground bg-background sticky top-0 h-6 text-xs font-medium">
        On This Page
      </p>
      {toc.map((item) => (
        <a
          key={item.url}
          href={item.url}
          className="text-muted-foreground hover:text-foreground data-[active=true]:text-foreground text-[0.8rem] no-underline transition-colors data-[active=true]:font-medium data-[depth=3]:pl-4 data-[depth=4]:pl-6"
          data-active={item.url === `#${activeHeading}`}
          data-depth={item.depth}
        >
          {item.title}
        </a>
      ))}
    </div>
  )
}