@dndbuilder.com/react
Version:
Drag and drop builder for React
58 lines (57 loc) • 2.27 kB
JavaScript
"use client";
import { jsxs as t, jsx as o } from "react/jsx-runtime";
import p from "../../icons/collapse-shape.js";
import { BuilderConfiguration as c } from "../../../config/builder.config.js";
import { getSelectedBlock as n } from "../../../../../../store/selectors.js";
import { unselectBlock as f } from "../../../store/builder-slice.js";
import { useAppSelector as d } from "../../../hooks/use-app-selector.js";
import "react";
import { useAppDispatch as h } from "../../../hooks/use-app-dispatch.js";
import "../../../store/theme-slice.js";
import "../../../../../../_virtual/cjs.js";
import { useAction as u } from "../../../hooks/use-action.js";
import { classNames as b } from "../../../../../../utils.js";
import { FiChevronLeft as k } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/fi/index.js";
import { BlockControlPanel as x } from "./block-control-panel.js";
import { BlockNavigation as B } from "./block-navigation.js";
const O = ({ className: i, ...l }) => {
var r;
const { isLeftPanelOpen: s } = u(), e = d(n), a = h(), m = () => {
a(f());
};
return /* @__PURE__ */ t(
"div",
{
className: b(
"editor-sidebar absolute z-30 h-full w-[290px] border-r bg-white shadow-sm transition-all duration-300",
s ? "left-0" : "left-[-290px]",
i
),
...l,
children: [
e && /* @__PURE__ */ t(
"button",
{
className: "editor-sidebar-header relative flex h-14 w-[290px] items-center justify-center border-b bg-white",
onClick: m,
children: [
/* @__PURE__ */ o(k, { size: 20, className: "absolute left-2 top-1/2 -translate-y-1/2" }),
/* @__PURE__ */ t("span", { className: "text-base font-semibold", children: [
"Edit ",
(r = c.getBlock(e.type)) == null ? void 0 : r.label
] })
]
}
),
/* @__PURE__ */ t("div", { className: "relative h-full", children: [
e ? /* @__PURE__ */ o(x, { type: e.type }, e.id) : /* @__PURE__ */ o(B, {}),
/* @__PURE__ */ o(p, {})
] })
]
}
);
};
export {
O as LeftPanel
};
//# sourceMappingURL=left-panel.js.map