Collapsible

TSX
"use client";

import * as React from "react";

import { ChevronsUpDownIcon } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";

export default function CollapsibleDemo() {
  const [open, setOpen] = React.useState(false);

  return (
    <Collapsible
      open={open}
      onOpenChange={setOpen}
      className="flex w-full max-w-sm flex-col gap-2"
    >
      <div className="flex items-center justify-between gap-4 px-4">
        <h4 className="text-sm font-semibold">
          @owuzan starred 3 repositories
        </h4>
        <CollapsibleTrigger
          render={<Button variant="ghost" size="icon" className="size-8" />}
        >
          <ChevronsUpDownIcon className="size-4" />
          <span className="sr-only">Toggle</span>
        </CollapsibleTrigger>
      </div>
      <div className="rounded-md border px-4 py-2 font-mono text-sm">
        shadcn-ui/ui
      </div>
      <CollapsibleContent className="flex flex-col gap-2">
        <div className="rounded-md border px-4 py-2 font-mono text-sm">
          mui/base-ui
        </div>
        <div className="rounded-md border px-4 py-2 font-mono text-sm">
          useui/sevenui
        </div>
      </CollapsibleContent>
    </Collapsible>
  );
}

TSX
"use client";

import { ChevronRightIcon, FileIcon, FolderIcon } from "lucide-react";

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";

type TreeNode = { name: string; children?: TreeNode[] };

const tree: TreeNode[] = [
  {
    name: "src",
    children: [
      {
        name: "components",
        children: [{ name: "button.tsx" }, { name: "card.tsx" }],
      },
      { name: "lib", children: [{ name: "utils.ts" }] },
      { name: "index.ts" },
    ],
  },
  { name: "package.json" },
  { name: "README.md" },
];

function TreeItem({ node }: { node: TreeNode }) {
  if (!node.children) {
    return (
      <div className="flex items-center gap-2 rounded-md px-2 py-1 text-sm">
        <FileIcon className="size-4 text-muted-foreground" />
        {node.name}
      </div>
    );
  }

  return (
    <Collapsible defaultOpen={node.name === "src"}>
      <CollapsibleTrigger className="group/tree flex w-full items-center gap-2 rounded-md px-2 py-1 text-sm outline-none hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50">
        <ChevronRightIcon className="size-4 text-muted-foreground transition-transform group-data-panel-open/tree:rotate-90" />
        <FolderIcon className="size-4 text-muted-foreground" />
        {node.name}
      </CollapsibleTrigger>
      <CollapsibleContent className="pl-5">
        {node.children.map((child) => (
          <TreeItem key={child.name} node={child} />
        ))}
      </CollapsibleContent>
    </Collapsible>
  );
}

export default function CollapsibleFileTree() {
  return (
    <div className="w-full max-w-xs rounded-lg border p-2">
      {tree.map((node) => (
        <TreeItem key={node.name} node={node} />
      ))}
    </div>
  );
}