@dndbuilder.com/react
Version:
Drag and drop builder for React
128 lines (127 loc) • 5.33 kB
JavaScript
"use client";
import { jsx as e, jsxs as o } from "react/jsx-runtime";
import { ScrollArea as m } from "../../shared/scroll-area.js";
import "../../../../../../store/selectors.js";
import "../../../store/builder-slice.js";
import { useState as l } from "react";
import "../../../store/theme-slice.js";
import "../../../config/builder.config.js";
import "../../../../../../_virtual/cjs.js";
import { useAction as c } from "../../../hooks/use-action.js";
import { ThemeSettingsType as i, BuilderRightPanelType as a } from "../../../types/index.js";
import { BsFiletypeCss as p } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bs/index.js";
import { FiSettings as d, FiX as h, FiLink as g } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/fi/index.js";
import { LiaAngleRightSolid as f } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/lia/index.js";
import { RxButton as u } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/rx/index.js";
import { TbTypography as S } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/tb/index.js";
import { TfiLayout as T } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/tfi/index.js";
import { VscSymbolColor as C } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/vsc/index.js";
import y from "./theme-button-settings.js";
import b from "./theme-color-settings.js";
import N from "./theme-custom-css-settings.js";
import v from "./theme-layout-settings.js";
import L from "./theme-link-settings.js";
import x from "./theme-typography-settings.js";
const r = ({ label: s, icon: t, onClick: n }) => /* @__PURE__ */ o(
"div",
{
onClick: n,
className: "flex cursor-pointer items-center justify-between px-4 py-3 hover:bg-gray-50",
children: [
/* @__PURE__ */ o("div", { className: "flex items-center", children: [
t && /* @__PURE__ */ e("div", { className: "w-4", children: t }),
/* @__PURE__ */ e("div", { className: "ms-2", children: s })
] }),
/* @__PURE__ */ e(f, {})
]
}
), O = () => {
const [s, t] = l(i.GLOBAL), { toggleRightPanel: n } = c();
switch (s) {
case i.LAYOUT:
return /* @__PURE__ */ e(v, { setCurrentSetting: t });
case i.COLOR:
return /* @__PURE__ */ e(b, { setCurrentSetting: t });
case i.TYPOGRAPHY:
return /* @__PURE__ */ e(x, { setCurrentSetting: t });
case i.BUTTON:
return /* @__PURE__ */ e(y, { setCurrentSetting: t });
case i.LINK:
return /* @__PURE__ */ e(L, { setCurrentSetting: t });
case i.CUSTOM_CSS:
return /* @__PURE__ */ e(N, { setCurrentSetting: t });
default:
return /* @__PURE__ */ o("div", { className: "relative", children: [
/* @__PURE__ */ o("div", { className: "flex items-center justify-between gap-2 border-b p-4 text-base font-semibold", children: [
/* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ e(d, {}),
"Theme Settings"
] }),
/* @__PURE__ */ e(
"button",
{
className: "text-gray-600 hover:text-gray-900",
onClick: () => {
n(a.SETTINGS);
},
children: /* @__PURE__ */ e(h, { size: 16 })
}
)
] }),
/* @__PURE__ */ e("div", { className: "border-b", children: /* @__PURE__ */ o("div", { className: "divide-y", children: [
/* @__PURE__ */ e(
r,
{
onClick: () => t(i.LAYOUT),
label: "Layout",
icon: /* @__PURE__ */ e(T, { size: 16 })
}
),
/* @__PURE__ */ e(
r,
{
onClick: () => t(i.COLOR),
label: "Colors",
icon: /* @__PURE__ */ e(C, { size: 16 })
}
),
/* @__PURE__ */ e(
r,
{
onClick: () => t(i.TYPOGRAPHY),
label: "Typography",
icon: /* @__PURE__ */ e(S, { size: 16 })
}
),
/* @__PURE__ */ e(
r,
{
onClick: () => t(i.BUTTON),
label: "Button",
icon: /* @__PURE__ */ e(u, { size: 16 })
}
),
/* @__PURE__ */ e(
r,
{
onClick: () => t(i.LINK),
label: "Link",
icon: /* @__PURE__ */ e(g, {})
}
),
/* @__PURE__ */ e(
r,
{
onClick: () => t(i.CUSTOM_CSS),
label: "Custom CSS",
icon: /* @__PURE__ */ e(p, { size: 18 })
}
)
] }) })
] });
}
}, Q = () => /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(m, { className: "h-[calc(100vh-115px)]", children: /* @__PURE__ */ e("div", { className: "panel-scroll-content", children: /* @__PURE__ */ e(O, {}) }) }) });
export {
Q as default
};
//# sourceMappingURL=theme-settings.js.map