"use client"

import * as React from "react"
import { ChevronDown, ChevronRight, File, Folder } from "lucide-react"

import { cn } from "@/lib/utils"

export interface TreeNode {
  id: string
  label: string
  icon?: React.ReactNode
  children?: TreeNode[]
}

interface TreeViewProps extends React.HTMLAttributes<HTMLDivElement> {
  nodes: TreeNode[]
  defaultExpanded?: string[]
}

function TreeView({ nodes, defaultExpanded = [], className, ...props }: TreeViewProps) {
  const [expanded, setExpanded] = React.useState<Set<string>>(
    () => new Set(defaultExpanded)
  )

  const toggleNode = (id: string) => {
    setExpanded((prev) => {
      const next = new Set(prev)
      if (next.has(id)) {
        next.delete(id)
      } else {
        next.add(id)
      }
      return next
    })
  }

  return (
    <div className={cn("space-y-1", className)} {...props}>
      {nodes.map((node) => (
        <TreeItem
          key={node.id}
          node={node}
          level={0}
          expanded={expanded}
          onToggle={toggleNode}
        />
      ))}
    </div>
  )
}

function TreeItem({
  node,
  level,
  expanded,
  onToggle,
}: {
  node: TreeNode
  level: number
  expanded: Set<string>
  onToggle: (id: string) => void
}) {
  const hasChildren = Boolean(node.children?.length)
  const isOpen = expanded.has(node.id)

  return (
    <div>
      <button
        type="button"
        onClick={() => (hasChildren ? onToggle(node.id) : undefined)}
        className={cn(
          "flex w-full items-center gap-2 rounded-md px-2 py-1 text-left text-sm transition-colors hover:bg-muted/40",
          hasChildren ? "cursor-pointer" : "cursor-default"
        )}
        style={{ paddingLeft: `${level * 16 + 8}px` }}
      >
        {hasChildren ? (
          isOpen ? (
            <ChevronDown className="h-4 w-4 text-muted-foreground" />
          ) : (
            <ChevronRight className="h-4 w-4 text-muted-foreground" />
          )
        ) : (
          <span className="h-4 w-4" />
        )}
        <span className="text-muted-foreground">
          {node.icon ? node.icon : hasChildren ? (
            <Folder className="h-4 w-4" />
          ) : (
            <File className="h-4 w-4" />
          )}
        </span>
        <span className="text-foreground">{node.label}</span>
      </button>

      {hasChildren && isOpen ? (
        <div className="space-y-1">
          {node.children?.map((child) => (
            <TreeItem
              key={child.id}
              node={child}
              level={level + 1}
              expanded={expanded}
              onToggle={onToggle}
            />
          ))}
        </div>
      ) : null}
    </div>
  )
}

export { TreeView }
export type { TreeViewProps }
Tree View

Dependencies

Files

Installation
