Tree() — ui Function Reference

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

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ Tree() — ui Function Reference

Dependency Diagram

graph TD
  c3d4fffb_e5e9_12ad_ec8d_832890ea5273["Tree()"]
  9b842276_9b99_ba90_8b96_066d8d6fcd62["toc.tsx"]
  c3d4fffb_e5e9_12ad_ec8d_832890ea5273 -->|defined in| 9b842276_9b99_ba90_8b96_066d8d6fcd62
  style c3d4fffb_e5e9_12ad_ec8d_832890ea5273 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/components/toc.tsx lines 82–107

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
}