Tree() — ui Function Reference

Architecture documentation for the Tree() function in app-sidebar.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ Tree() — ui Function Reference

Dependency Diagram

graph TD
  f316380e_c6b0_112d_a9a1_7f0e1d97be10["Tree()"]
  92b8c1aa_1312_1700_badf_dcd4faef4b2f["app-sidebar.tsx"]
  f316380e_c6b0_112d_a9a1_7f0e1d97be10 -->|defined in| 92b8c1aa_1312_1700_badf_dcd4faef4b2f
  style f316380e_c6b0_112d_a9a1_7f0e1d97be10 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/registry/default/blocks/sidebar-11/components/app-sidebar.tsx lines 103–141

function Tree({ item }: { item: string | any[] }) {
  const [name, ...items] = Array.isArray(item) ? item : [item]

  if (!items.length) {
    return (
      <SidebarMenuButton
        isActive={name === "button.tsx"}
        className="data-[active=true]:bg-transparent"
      >
        <File />
        {name}
      </SidebarMenuButton>
    )
  }

  return (
    <SidebarMenuItem>
      <Collapsible
        className="group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90"
        defaultOpen={name === "components" || name === "ui"}
      >
        <CollapsibleTrigger asChild>
          <SidebarMenuButton>
            <ChevronRight className="transition-transform" />
            <Folder />
            {name}
          </SidebarMenuButton>
        </CollapsibleTrigger>
        <CollapsibleContent>
          <SidebarMenuSub>
            {items.map((subItem, index) => (
              <Tree key={index} item={subItem} />
            ))}
          </SidebarMenuSub>
        </CollapsibleContent>
      </Collapsible>
    </SidebarMenuItem>
  )
}