import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { FolderTreeIcon } from "lucide-react";
import { CloseButton } from "../../components/ui/close-button";
import { cn } from "../../lib/utils";
import { useEditContext } from "../client/editContext";
import { MainContentTree } from "./MainContentTree";
import { CONTENT_TREE_SIDEBAR_ID } from "./contentTreeConstants";
export function ContentTreePanel({ opening = false, }) {
    const editContext = useEditContext();
    return (_jsx("div", { className: cn("h-full w-full transition-[opacity,transform] duration-200 ease-in-out motion-reduce:transition-none", opening ? "-translate-x-4 opacity-0" : "translate-x-0 opacity-100"), "data-testid": "content-tree-panel", children: _jsxs("div", { className: "border-border-default flex h-full w-full flex-col border-r bg-white", children: [_jsxs("div", { className: "border-border-default text-neutral-grey-100 flex items-center border-b py-2 pr-2 pl-3 text-sm font-medium", children: [_jsx("div", { className: "mr-2", children: _jsx(FolderTreeIcon, { className: "h-4 w-4", strokeWidth: 1 }) }), _jsx("div", { className: "mr-auto truncate", children: "Content Tree" }), _jsx(CloseButton, { onClick: () => editContext?.toggleSidebar(CONTENT_TREE_SIDEBAR_ID, {
                                forceClose: true,
                            }), label: "Close", className: "ml-2" })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: _jsx(MainContentTree, { mode: "normal", hideRootNodes: true }) })] }) }));
}
//# sourceMappingURL=ContentTreePanel.js.map