{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-tree-4","type":"registry:block","title":"Tree with custom indent.","description":"Tree with custom indent.","dependencies":["@headless-tree/core","@headless-tree/react"],"registryDependencies":["@reui/tree"],"files":[{"path":"c-tree-4.tsx","type":"registry:block","content":"\"use client\"\n\nimport {\n  Tree,\n  TreeItem,\n  TreeItemLabel,\n} from \"@/components/reui/tree\"\nimport { hotkeysCoreFeature, syncDataLoaderFeature } from \"@headless-tree/core\"\nimport { useTree } from \"@headless-tree/react\"\n\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ninterface Item {\n  name: string\n  children?: string[]\n}\n\nconst items: Record<string, Item> = {\n  crm: {\n    name: \"CRM\",\n    children: [\"leads\", \"accounts\", \"activities\", \"support\"],\n  },\n  leads: {\n    name: \"Leads\",\n    children: [\"new-lead\", \"contacted-lead\", \"qualified-lead\"],\n  },\n  \"new-lead\": { name: \"New Lead\" },\n  \"contacted-lead\": { name: \"Contacted Lead\" },\n  \"qualified-lead\": { name: \"Qualified Lead\" },\n  accounts: {\n    name: \"Accounts\",\n    children: [\"acme-corp\", \"globex-inc\"],\n  },\n  \"acme-corp\": {\n    name: \"Acme Corp\",\n    children: [\"acme-contacts\", \"acme-opportunities\"],\n  },\n  \"acme-contacts\": {\n    name: \"Contacts\",\n    children: [\"john-smith\", \"jane-doe\"],\n  },\n  \"john-smith\": { name: \"John Smith\" },\n  \"jane-doe\": { name: \"Jane Doe\" },\n  \"acme-opportunities\": {\n    name: \"Opportunities\",\n    children: [\"website-redesign\", \"annual-maintenance\"],\n  },\n  \"website-redesign\": { name: \"Website Redesign\" },\n  \"annual-maintenance\": { name: \"Annual Maintenance\" },\n  \"globex-inc\": {\n    name: \"Globex Inc\",\n    children: [\"globex-contacts\", \"globex-opportunities\"],\n  },\n  \"globex-contacts\": {\n    name: \"Contacts\",\n    children: [\"alice-johnson\"],\n  },\n  \"alice-johnson\": { name: \"Alice Johnson\" },\n  \"globex-opportunities\": {\n    name: \"Opportunities\",\n    children: [\"cloud-migration\"],\n  },\n  \"cloud-migration\": { name: \"Cloud Migration\" },\n  activities: {\n    name: \"Activities\",\n    children: [\"calls\", \"meetings\", \"emails\"],\n  },\n  calls: { name: \"Calls\" },\n  meetings: { name: \"Meetings\" },\n  emails: { name: \"Emails\" },\n  support: {\n    name: \"Support\",\n    children: [\"open-tickets\", \"closed-tickets\"],\n  },\n  \"open-tickets\": { name: \"Open Tickets\" },\n  \"closed-tickets\": { name: \"Closed Tickets\" },\n}\n\nconst indent = 20\n\nexport function Pattern() {\n  const tree = useTree<Item>({\n    initialState: {\n      expandedItems: [\"leads\", \"accounts\", \"activities\"],\n    },\n    indent,\n    rootItemId: \"crm\",\n    getItemName: (item) => item.getItemData().name,\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\n    dataLoader: {\n      getItem: (itemId) => items[itemId],\n      getChildren: (itemId) => items[itemId].children ?? [],\n    },\n    features: [syncDataLoaderFeature, hotkeysCoreFeature],\n  })\n\n  return (\n    <div className=\"mx-auto w-full grow place-self-start lg:w-xs\">\n      <Tree\n        className=\"relative before:absolute before:inset-0 before:-ms-1.25 before:bg-[repeating-linear-gradient(to_right,transparent_0,transparent_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)))]\"\n        indent={indent}\n        tree={tree}\n        toggleIconType=\"plus-minus\"\n      >\n        {tree.getItems().map((item) => {\n          return (\n            <TreeItem key={item.getId()} item={item}>\n              <TreeItemLabel className=\"before:bg-background relative before:absolute before:inset-x-0 before:-inset-y-0.5 before:-z-10\">\n                <span className=\"ms-1 flex items-center gap-2\">\n                  {item.isFolder() ? (\n                    item.isExpanded() ? (\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                        remixicon=\"RiFolderOpenLine\"\n                        className=\"text-muted-foreground pointer-events-none size-4\"\n                      />\n                    ) : (\n                      <IconPlaceholder\n                        lucide=\"FolderIcon\"\n                        tabler=\"IconFolder\"\n                        hugeicons=\"FolderIcon\"\n                        phosphor=\"FolderIcon\"\n                        remixicon=\"RiFolderLine\"\n                        className=\"text-muted-foreground pointer-events-none size-4\"\n                      />\n                    )\n                  ) : (\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileEmpty02Icon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                      className=\"text-muted-foreground pointer-events-none size-4\"\n                    />\n                  )}\n                  {item.getItemName()}\n                </span>\n              </TreeItemLabel>\n            </TreeItem>\n          )\n        })}\n      </Tree>\n    </div>\n  )\n}","target":"components/examples/c-tree-4.tsx"}],"meta":{"order":4,"label":"Plus Minus Toggles"}}