@dndbuilder.com/react/dist/packages/react/src/blocks/faq/faq.config.js

Drag and drop builder for React

import { BlockGroup as G, BlockType as O } from "../../types/block.js";
import { Unit as e } from "../../types/style.js";
import { createBlockConfig as U, createId as d } from "../../../../../utils.js";
import { generateSpacingValue as a, generateTypography as X, generateResponsiveStyle as E, generateUnitValue as $ } from "../../utils/style.js";
import { lazy as l } from "react";
import { AiOutlineQuestionCircle as N } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/ai/index.js";
const _ = U({
  type: O.FAQ,
  label: "FAQ",
  icon: N,
  component: l(() => import("./components/faq.block.js")),
  group: G.ADVANCED,
  settings: {
    items: [
      {
        id: d(),
        title: { text: { en: "Where can I subscribe to your newsletter?" } },
        description: {
          text: {
            en: "We often send out our newsletter with news and great offers. We will never disclose your data to thhird partes and you can unsubscribe from the newsletter at any time."
          }
        }
      },
      {
        id: d(),
        title: {
          text: { en: "Can I order a free copy of magazine to sample?" }
        },
        description: {
          text: {
            en: "We often send out our newsletter with news and great offers. We will never disclose your data to thhird partes and you can unsubscribe from the newsletter at any time."
          }
        }
      },
      {
        id: d(),
        title: {
          text: { en: "Where on your website can I open a customer account?" }
        },
        description: {
          text: {
            en: "We often send out our newsletter with news and great offers. We will never disclose your data to thhird partes and you can unsubscribe from the newsletter at any time."
          }
        }
      }
    ],
    item: {
      border: {
        color: "#ddd",
        width: {
          desktop: {
            top: 1,
            right: 1,
            bottom: 1,
            left: 1,
            unit: e.PX,
            linked: !0
          },
          tablet: {
            top: 1,
            right: 1,
            bottom: 1,
            left: 1,
            unit: e.PX,
            linked: !0
          },
          mobile: {
            top: 1,
            right: 1,
            bottom: 1,
            left: 1,
            unit: e.PX,
            linked: !0
          }
        }
      },
      gap: {
        unit: e.REM,
        value: 0.4
      },
      padding: {
        desktop: {
          top: 1,
          right: 1,
          bottom: 1,
          left: 1,
          unit: e.REM,
          linked: !0
        },
        tablet: {
          top: 1,
          right: 1,
          bottom: 1,
          left: 1,
          unit: e.REM,
          linked: !0
        },
        mobile: {
          top: 1,
          right: 1,
          bottom: 1,
          left: 1,
          unit: e.REM,
          linked: !0
        }
      }
    },
    title: {
      typography: {
        fontSize: {
          desktop: {
            unit: e.PX,
            value: 20
          },
          tablet: {
            unit: e.PX,
            value: 19
          },
          mobile: {
            unit: e.PX,
            value: 17
          }
        }
      }
    },
    isAccordion: !0,
    isOpenFirstItem: !0
  },
  style: ({ settings: t, breakpoints: o }) => {
    var p, u, m, c, f, s, b, h, g, y, w, R, v, W, B, k;
    const {
      top: I,
      right: S,
      bottom: F,
      left: L
    } = a((u = (p = t.item) == null ? void 0 : p.border) == null ? void 0 : u.radius);
    return {
      "& .faqs": {
        display: "grid",
        gridGap: (c = (m = t.item) == null ? void 0 : m.gap) != null && c.value ? `${t.item.gap.value}${t.item.gap.unit}` : void 0,
        "& .item": {
          borderTopLeftRadius: I,
          borderTopRightRadius: S,
          borderBottomRightRadius: F,
          borderBottomLeftRadius: L,
          borderStyle: (s = (f = t.item) == null ? void 0 : f.border) != null && s.type ? (h = (b = t.item) == null ? void 0 : b.border) == null ? void 0 : h.type : void 0,
          borderColor: (y = (g = t.item) == null ? void 0 : g.border) == null ? void 0 : y.color,
          ...E(o, (r) => {
            var x, C, A, P, T;
            const {
              top: i,
              right: n,
              bottom: M,
              left: z
            } = a((A = (C = (x = t.item) == null ? void 0 : x.border) == null ? void 0 : C.width) == null ? void 0 : A[r]), {
              top: Q,
              right: V,
              bottom: q,
              left: D
            } = a((T = (P = t.item) == null ? void 0 : P.padding) == null ? void 0 : T[r]);
            return {
              borderTopWidth: i,
              borderRightWidth: n,
              borderBottomWidth: M,
              borderLeftWidth: z,
              paddingTop: Q,
              paddingRight: V,
              paddingBottom: q,
              paddingLeft: D
            };
          }),
          "& .title": {
            color: (R = (w = t.title) == null ? void 0 : w.color) == null ? void 0 : R.default,
            ...X(o, (v = t.title) == null ? void 0 : v.typography),
            ...E(o, (r) => {
              var i, n;
              return {
                marginBottom: $((n = (i = t.title) == null ? void 0 : i.spacing) == null ? void 0 : n[r])
              };
            })
          },
          "& .description": {
            color: (B = (W = t.description) == null ? void 0 : W.color) == null ? void 0 : B.default,
            ...X(o, (k = t.description) == null ? void 0 : k.typography)
          }
        }
      }
    };
  },
  controls: [
    {
      label: "Content",
      component: l(() => import("./components/faq-content.control.js"))
    },
    {
      label: "Style",
      component: l(() => import("./components/faq-style.control.js"))
    }
  ]
});
export {
  _ as default
};
//# sourceMappingURL=faq.config.js.map