{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-tree-1","type":"registry:block","title":"Basic tree.","description":"Basic tree.","dependencies":["@headless-tree/core","@headless-tree/react"],"registryDependencies":["@reui/tree"],"files":[{"path":"c-tree-1.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\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 indent={indent} tree={tree}>\n        {tree.getItems().map((item) => {\n          return (\n            <TreeItem key={item.getId()} item={item}>\n              <TreeItemLabel />\n            </TreeItem>\n          )\n        })}\n      </Tree>\n    </div>\n  )\n}","target":"components/examples/c-tree-1.tsx"}],"meta":{"order":1,"label":"Basic"}}