@dndbuilder.com/react/dist/packages/react/src/blocks/icon/components/icon-content.control.js

Drag and drop builder for React

"use client";
import { jsx as e, jsxs as a } from "react/jsx-runtime";
import { IconControl as u } from "../../../components/controls/icon.control.js";
import { LinkControl as g } from "../../../components/controls/link.control.js";
import { SelectControl as s } from "../../../components/controls/select.control.js";
import { ToggleGroupControl as d } from "../../../components/controls/toggle-group.control.js";
import { Accordion as l } from "../../../components/shared/accordion.js";
import { useSettings as n } from "../../../hooks/use-settings.js";
import { getCurrentBreakpoint as f } from "../../../../../../store/selectors.js";
import { SettingsType as t } from "../../../types/index.js";
import { Unit as i } from "../../../types/style.js";
import { useAppSelector as C } from "../../../hooks/use-app-selector.js";
import { AiOutlineAlignLeft as h, AiOutlineAlignCenter as k, AiOutlineAlignRight as b } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/ai/index.js";
const R = () => {
  const m = C(f), [p] = n("view.desktop", t.BLOCK), [c] = n("shape.desktop", t.BLOCK), [v, o] = n(
    `border.radius.${m}`,
    t.BLOCK
  );
  return /* @__PURE__ */ e(l, { defaultValue: "General", type: "single", collapsible: !0, children: /* @__PURE__ */ a(l.Item, { value: "General", children: [
    /* @__PURE__ */ e(l.Trigger, { className: "p-4", children: "General" }),
    /* @__PURE__ */ a(l.Content, { className: "px-4", children: [
      /* @__PURE__ */ e(u, { fieldName: "icon", label: "Select Icon", type: t.BLOCK }),
      /* @__PURE__ */ e(
        s,
        {
          label: "View",
          fieldName: "view.desktop",
          options: [
            { content: "Stacked", value: "stacked" },
            { content: "Framed", value: "framed" }
          ],
          type: t.BLOCK,
          onValueChange: (r) => {
            o((r === "stacked" || r === "framed") && c === "circle" ? {
              top: 50,
              right: 50,
              bottom: 50,
              left: 50,
              unit: i.PERCENTAGE,
              linked: !0
            } : {
              top: 0,
              right: 0,
              bottom: 0,
              left: 0,
              unit: i.PX,
              linked: !0
            });
          }
        }
      ),
      p !== "default" && /* @__PURE__ */ e(
        s,
        {
          label: "Shape",
          fieldName: "shape.desktop",
          options: [
            { content: "Circle", value: "circle" },
            { content: "Square", value: "square" }
          ],
          type: t.BLOCK,
          onValueChange: (r) => {
            o(r === "circle" ? {
              top: 50,
              right: 50,
              bottom: 50,
              left: 50,
              unit: i.PERCENTAGE,
              linked: !0
            } : {
              top: 0,
              right: 0,
              bottom: 0,
              left: 0,
              unit: i.PX,
              linked: !0
            });
          }
        }
      ),
      /* @__PURE__ */ e(g, { type: t.BLOCK }),
      /* @__PURE__ */ e(
        d,
        {
          type: t.BLOCK,
          fieldName: "alignment",
          label: "Alignment",
          responsive: !0,
          controls: [
            {
              tooltipContent: "Left",
              toggleTrigger: /* @__PURE__ */ e(h, { className: "text-sm" }),
              value: "left"
            },
            {
              tooltipContent: "Center",
              toggleTrigger: /* @__PURE__ */ e(k, { className: "text-sm" }),
              value: "center"
            },
            {
              tooltipContent: "Right",
              toggleTrigger: /* @__PURE__ */ e(b, { className: "text-sm" }),
              value: "right"
            }
          ]
        }
      )
    ] })
  ] }) });
};
export {
  R as default
};
//# sourceMappingURL=icon-content.control.js.map