@dndbuilder.com/react
Version:
Drag and drop builder for React
165 lines (164 loc) • 6.13 kB
JavaScript
import { BlockGroup as G, BlockType as H } from "../../types/block.js";
import { Unit as J, TextAlignType as O } from "../../types/style.js";
import { createBlockConfig as X } from "../../../../../utils.js";
import { generateResponsiveStyle as i, generateTypography as d, generatePseudoStyle as Y, generateUnitValue as u } from "../../utils/style.js";
import { lazy as c } from "react";
import { PiRectangleDashed as q } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/pi/index.js";
const _ = X({
type: H.BANNER,
label: "Banner",
icon: q,
component: c(() => import("./components/banner.block.js")),
group: G.ADVANCED,
settings: {
title: {
text: { en: "80% Off" },
typography: {
fontSize: {
desktop: { unit: J.PX, value: 20 }
}
}
},
subTitle: {
text: { en: "For selected brands" }
},
description: {
text: {
en: "Also credit card user will get 15% cash back on purchase over $300."
}
},
button: {
text: { en: "Click Here" }
},
image: {
fit: {
desktop: { default: "cover" }
}
},
overlayColor: {
desktop: { default: "rgba(0, 0, 0, 0.2)" }
}
},
style: ({ breakpoints: l, settings: o }) => {
var p, m, g, f, y, b, x, h, v, C, T, A, B, k, D, S, w, z, I, R, P, $, N;
return {
width: "100%",
"& .banner": {
...i(l, (r) => {
var t, e;
return {
backgroundSize: (e = (t = o.image) == null ? void 0 : t.fit) == null ? void 0 : e[r]
};
}),
backgroundImage: (m = (p = o.image) == null ? void 0 : p.media) != null && m.url ? `url(${(f = (g = o.image) == null ? void 0 : g.media) == null ? void 0 : f.url})` : void 0,
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
position: "relative",
"& .overlay": {
display: (b = (y = o.image) == null ? void 0 : y.media) != null && b.url ? "block" : "none",
backgroundColor: (h = (x = o.overlayColor) == null ? void 0 : x.desktop) == null ? void 0 : h.default,
position: "absolute",
top: 0,
left: 0,
bottom: 0,
right: 0,
zIndex: 1
},
"& .content": {
position: "relative",
zIndex: 2,
...i(l, (r) => {
var t, e;
return {
padding: u((e = (t = o.card) == null ? void 0 : t.padding) == null ? void 0 : e[r])
};
})
},
"& .title": {
color: (T = (C = (v = o.title) == null ? void 0 : v.color) == null ? void 0 : C.desktop) == null ? void 0 : T.default,
...d(l, (A = o.title) == null ? void 0 : A.typography),
...i(l, (r) => {
var t, e, n, a;
return {
textAlign: (e = (t = o.title) == null ? void 0 : t.alignment) == null ? void 0 : e[r],
marginBottom: u((a = (n = o.title) == null ? void 0 : n.spacing) == null ? void 0 : a[r])
};
})
// Typography end
},
"& .sub-title": {
color: (D = (k = (B = o.subTitle) == null ? void 0 : B.color) == null ? void 0 : k.desktop) == null ? void 0 : D.default,
...d(l, (S = o.subTitle) == null ? void 0 : S.typography),
...i(l, (r) => {
var t, e, n, a;
return {
textAlign: (e = (t = o.subTitle) == null ? void 0 : t.alignment) == null ? void 0 : e[r],
marginBottom: u((a = (n = o.subTitle) == null ? void 0 : n.spacing) == null ? void 0 : a[r])
};
})
// Typography end
},
"& .description": {
color: (I = (z = (w = o.description) == null ? void 0 : w.color) == null ? void 0 : z.desktop) == null ? void 0 : I.default,
...d(l, (R = o.description) == null ? void 0 : R.typography),
...i(l, (r) => {
var t, e, n, a;
return {
textAlign: (e = (t = o.description) == null ? void 0 : t.alignment) == null ? void 0 : e[r],
marginBottom: u((a = (n = o.description) == null ? void 0 : n.spacing) == null ? void 0 : a[r])
};
})
// Typography end
},
// Button
"& .button-wrapper": {
width: "100%",
display: "flex",
alignItems: "center",
...i(l, (r) => {
var e, n;
const t = (n = (e = o.button) == null ? void 0 : e.alignment) == null ? void 0 : n[r];
return {
justifyContent: t === "left" ? "flex-start" : t === "right" ? "flex-end" : t === "center" ? "center" : void 0
};
}),
"& .btn": {
padding: "10px 20px",
borderRadius: "5px",
textAlign: "center",
transitionDuration: (P = o.button) != null && P.transitionDuration ? `${($ = o.button) == null ? void 0 : $.transitionDuration}ms` : void 0,
...d(l, (N = o.button) == null ? void 0 : N.typography),
...i(l, (r) => {
var e, n;
const t = (n = (e = o.button) == null ? void 0 : e.alignment) == null ? void 0 : n[r];
return {
...Y((a) => {
var U, E, F, V, j;
return {
color: (F = (E = (U = o.button) == null ? void 0 : U.color) == null ? void 0 : E[r]) == null ? void 0 : F[a],
backgroundColor: `${(j = (V = o.button) == null ? void 0 : V.backgroundColor) == null ? void 0 : j[a]} !important`
};
}),
width: t === O.JUSTIFY ? "100%" : void 0
};
})
}
}
}
};
},
controls: [
{
label: "Content",
component: c(() => import("./components/banner-content.control.js"))
},
{
label: "Style",
component: c(() => import("./components/banner-style.control.js"))
}
]
});
export {
_ as default
};
//# sourceMappingURL=banner.config.js.map