Tree view

import * as React from "react";
import { Tree, TreeItem } from "@/components/ui/tree-view";

export default function Example() {
  const [open, setOpen] = React.useState(true);
  const [sel, setSel] = React.useState("green.md");
  return (
    <Tree style={{ width: 280, maxWidth: "100%" }} aria-label="Product files">
      <TreeItem expanded={open} onClick={() => setOpen(!open)}>teas</TreeItem>
      {open ? (
        <>
          <TreeItem level="2" selected={sel === "green.md"} onClick={() => setSel("green.md")}>sylhet-green.md</TreeItem>
          <TreeItem level="2" selected={sel === "chai.md"} onClick={() => setSel("chai.md")}>masala-chai.md</TreeItem>
        </>
      ) : null}
      <TreeItem selected={sel === "readme"} onClick={() => setSel("readme")}>README.md</TreeItem>
    </Tree>
  );
}