Tree

import { Tree, type TreeItem } from "@vortex/ui-icignal"
 
const items: TreeItem[] = [
  {
    id: "src",
    label: "src",
    children: [
      { id: "app.tsx", label: "App.tsx" },
      { id: "index.tsx", label: "index.tsx" },
    ],
  },
  { id: "package.json", label: "package.json" },
]
 
<Tree items={items} showHeader={false} showSearch={false} />

<Tree items={items} defaultExpandAll showHeader={false} showSearch={false} />

// Level 1: 루트 레벨 부모 노드만 펼침
<Tree items={items} defaultExpandLevel={1} showHeader={false} showSearch={false} />
 
// Level 2: depth 0, 1의 부모 노드까지 펼침
<Tree items={items} defaultExpandLevel={2} showHeader={false} showSearch={false} />

<Tree
  items={items}
  defaultExpandLevel={1}
  defaultExpandedIds={["components"]}
  showHeader={false}
  showSearch={false}
/>

const [checkedIds, setCheckedIds] = useState<string[]>([])
 
<Tree
  items={items}
  showCheckbox
  checkedIds={checkedIds}
  onCheckedChange={setCheckedIds}
/>

<Tree
  items={items}
  showSearch
  searchPlaceholder="파일 검색..."
  showHeader={false}
/>

const [items, setItems] = useState(initialItems)
 
<Tree
  items={items}
  draggable
  onItemsChange={setItems}
  onDrop={(result) => console.log("Dropped:", result)}
/>

<Tree
  items={items}
  showHeader
  showSearch
  expandAllLabel="Expand All"
  collapseAllLabel="Collapse All"
  searchPlaceholder="Search nodes..."
/>

const items: TreeItem[] = [
  {
    id: "root",
    label: "프로젝트",
    children: [
      { id: "active", label: "활성 노드" },
      { id: "disabled", label: "비활성 노드", disabled: true },
    ],
  },
]
 
<Tree items={items} />

const items: TreeItem[] = [
  {
    id: "team",
    label: <span className="font-semibold">개발팀</span>,
    searchText: "개발팀",
    children: [
      {
        id: "alice",
        label: (
          <span className="flex items-center gap-2">
            Alice
            <span className="text-xs text-green-600">● online</span>
          </span>
        ),
        searchText: "Alice",
      },
    ],
  },
]
 
<Tree items={items} showSearch />

const items: TreeItem[] = [
  {
    id: "payment",
    label: "전자결재",
    rowClassName: "bg-blue-100",
    children: [
      { id: "recv", label: "결재수신", rowClassName: "bg-blue-50" },
    ],
  },
]
 
<Tree
  items={items}
  rowClassName="py-1 px-4 rounded-md"  // 모든 행에 공통 적용
/>

<Tree
  items={items}
  rowClassName="py-1 px-4 rounded-md"
  getRowClassName={(item, level) => {
    if (level === 0) return "bg-slate-100 font-semibold"
    if (item.children?.length) return "bg-accent/50"
    return undefined
  }}
/>

function ActionButton({ icon: Icon, onClick }) {
  return (
    <button
      type="button"
      className="p-0.5 rounded hover:bg-muted"
      onClick={(e) => {
        e.stopPropagation()
        onClick()
      }}
    >
      <Icon className="w-3.5 h-3.5" />
    </button>
  )
}
 
const items: TreeItem[] = [
  {
    id: "project",
    label: (
      <span className="flex items-center justify-between w-full gap-2">
        <span>프로젝트</span>
        <ActionButton icon={Plus} onClick={() => alert("추가")} />
      </span>
    ),
    searchText: "프로젝트",
    children: [
      {
        id: "button.tsx",
        label: (
          <span className="flex items-center justify-between w-full gap-2">
            <span>button.tsx</span>
            <ActionButton icon={Trash2} onClick={() => alert("삭제")} />
          </span>
        ),
        searchText: "button.tsx",
      },
    ],
  },
]
 
<Tree items={items} />