BlockViewerFileTree() — ui Function Reference

Architecture documentation for the BlockViewerFileTree() function in block-viewer.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives calls 1

Entity Profile

ComponentRegistry→ UIPrimitives→ BlockViewerFileTree() — ui Function Reference

Dependency Diagram

graph TD
  7b6f056c_f5ca_8e03_e453_02ed4f8baac9["BlockViewerFileTree()"]
  1286b7b7_c8bd_53b6_a231_a71e5b6ebd50["block-viewer.tsx"]
  7b6f056c_f5ca_8e03_e453_02ed4f8baac9 -->|defined in| 1286b7b7_c8bd_53b6_a231_a71e5b6ebd50
  83e47c77_6e8f_02ce_db45_c9629b80fe41["useBlockViewer()"]
  7b6f056c_f5ca_8e03_e453_02ed4f8baac9 -->|calls| 83e47c77_6e8f_02ce_db45_c9629b80fe41
  style 7b6f056c_f5ca_8e03_e453_02ed4f8baac9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/components/block-viewer.tsx lines 313–341

export function BlockViewerFileTree() {
  const { tree } = useBlockViewer()

  if (!tree) {
    return null
  }

  return (
    <SidebarProvider className="flex !min-h-full flex-col">
      <Sidebar
        collapsible="none"
        className="w-full flex-1 border-r border-zinc-700 bg-zinc-900 text-white"
      >
        <SidebarGroupLabel className="h-12 rounded-none border-b border-zinc-700 px-4 text-sm text-white">
          Files
        </SidebarGroupLabel>
        <SidebarGroup className="p-0">
          <SidebarGroupContent>
            <SidebarMenu className="gap-1.5">
              {tree.map((file, index) => (
                <Tree key={index} item={file} index={1} />
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </Sidebar>
    </SidebarProvider>
  )
}