@dndbuilder.com/react
Version:
Drag and drop builder for React
316 lines (315 loc) • 13.7 kB
JavaScript
import { BlockGroup as io, BlockType as ro } from "../../types/block.js";
import { Unit as Q } from "../../types/style.js";
import { createBlockConfig as ao, createId as q } from "../../../../../utils.js";
import { generateResponsiveStyle as R, generateTypography as lo, generatePseudoStyle as H, generateUnitValue as s, generateSpacingValue as j, generateBorderRadius as no, generateBoxShadow as to } from "../../utils/style.js";
import { lazy as V } from "react";
import { LuQuote as mo } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/lu/index.js";
import { TestimonialPresets as uo } from "./types/index.js";
const yo = ao({
type: ro.TESTIMONIAL,
label: "Testimonial",
icon: mo,
component: V(() => import("./components/testimonial.block.js")),
group: io.ADVANCED,
settings: {
preset: { desktop: uo.Preset1 },
layout: { desktop: "grid" },
columns: {
desktop: 3,
tablet: 2,
mobile: 1
},
rows: { desktop: 1, tablet: 1, mobile: 1 },
rowGap: {
desktop: {
unit: Q.REM,
value: 3.5
}
},
columnGap: {
desktop: {
unit: Q.REM,
value: 5
}
},
testimonials: [
{
id: q(),
content: {
en: "Qui dolor enim consectetur do et sint in ea non dolore. Enim minim id minim eu cillum sunt dolore liquip. Amet elit officia."
},
name: { en: "Ana Lou" },
position: { en: "Designer" },
rating: 3.5,
showRating: !0
},
{
id: q(),
content: {
en: "Qui dolor enim consectetur do et sint in ea non dolore. Enim minim id minim eu cillum sunt dolore liquip. Amet elit officia."
},
name: { en: "John Smith" },
position: { en: "CEO, Fresh Start" },
rating: 4,
showRating: !0
},
{
id: q(),
content: {
en: "Qui dolor enim consectetur do et sint in ea non dolore. Enim minim id minim eu cillum sunt dolore liquip. Amet elit officia."
},
name: { en: "Sarah Johnson" },
position: { en: "Marketing Director" },
rating: 0,
showRating: !0
}
],
card: {
padding: {
desktop: {
unit: Q.REM,
linked: !0,
left: 1,
right: 1,
top: 1,
bottom: 1
},
tablet: {
unit: Q.REM,
linked: !0,
left: 1,
right: 1,
top: 1,
bottom: 1
},
mobile: {
unit: Q.REM,
linked: !0,
left: 1,
right: 1,
top: 1,
bottom: 1
}
}
},
slider: {
showArrows: { desktop: !0 },
autoPlay: { desktop: !0 },
infinite: { desktop: !0 },
autoplaySpeed: { desktop: 3e3 }
}
},
style: ({ settings: o, breakpoints: w }) => {
var J, O, U, F, X, Y, k, K, Z, _, A, oo;
return {
"& .testimonial": {
display: "grid",
placeItems: "center",
gridTemplateRows: "auto",
...R(w, (e) => {
var t, i, r, a, l, d, c, p, h, g, f, n, m, u, v;
return {
gridTemplateColumns: `repeat(${((t = o.columns) == null ? void 0 : t[e]) ?? ((i = o.columns) == null ? void 0 : i.tablet) ?? ((r = o.columns) == null ? void 0 : r.desktop) ?? 1}, minmax(0, 1fr))`,
rowGap: ((l = (a = o.rowGap) == null ? void 0 : a[e]) == null ? void 0 : l.value) && `${(c = (d = o.rowGap) == null ? void 0 : d[e]) == null ? void 0 : c.value}${(h = (p = o.rowGap) == null ? void 0 : p[e]) == null ? void 0 : h.unit}`,
columnGap: ((f = (g = o.columnGap) == null ? void 0 : g[e]) == null ? void 0 : f.value) && `${(m = (n = o.columnGap) == null ? void 0 : n[e]) == null ? void 0 : m.value}${(v = (u = o.columnGap) == null ? void 0 : u[e]) == null ? void 0 : v.unit}`
};
})
},
"& .testimonial-card": {
backgroundColor: (U = (O = (J = o.card) == null ? void 0 : J.backgroundColor) == null ? void 0 : O.desktop) == null ? void 0 : U.default,
textAlign: (X = (F = o.card) == null ? void 0 : F.alignment) == null ? void 0 : X.desktop,
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: ((k = (Y = o.card) == null ? void 0 : Y.alignment) == null ? void 0 : k.desktop) === "center" ? "center" : ((Z = (K = o.card) == null ? void 0 : K.alignment) == null ? void 0 : Z.desktop) === "right" ? "flex-end" : "flex-start",
...H((e) => {
var d, c, p, h, g, f, n, m, u, v, y;
const {
top: t,
right: i,
bottom: r,
left: a
} = j((p = (c = (d = o.card) == null ? void 0 : d.border) == null ? void 0 : c.radius) == null ? void 0 : p[e]), l = (f = (g = (h = o.card) == null ? void 0 : h.border) == null ? void 0 : g.type) == null ? void 0 : f[e];
return {
borderTopLeftRadius: t,
borderTopRightRadius: i,
borderBottomRightRadius: r,
borderBottomLeftRadius: a,
borderStyle: l || void 0,
borderColor: (u = (m = (n = o.card) == null ? void 0 : n.border) == null ? void 0 : m.color) == null ? void 0 : u[e],
boxShadow: to((y = (v = o.card) == null ? void 0 : v.boxShadow) == null ? void 0 : y[e])
};
}),
...R(w, (e) => {
var l, d;
const {
top: t,
right: i,
bottom: r,
left: a
} = j((d = (l = o.card) == null ? void 0 : l.padding) == null ? void 0 : d[e]);
return {
paddingTop: t,
paddingRight: i,
paddingBottom: r,
paddingLeft: a,
...H((c) => {
var n, m, u, v;
const {
top: p,
right: h,
bottom: g,
left: f
} = j((v = (u = (m = (n = o.card) == null ? void 0 : n.border) == null ? void 0 : m.width) == null ? void 0 : u[e]) == null ? void 0 : v[c]);
return {
borderTopWidth: p,
borderRightWidth: h,
borderBottomWidth: g,
borderLeftWidth: f
};
})
};
}),
"& .review-msg": {
color: (A = (_ = o.review) == null ? void 0 : _.color) == null ? void 0 : A.default,
...lo(w, (oo = o.review) == null ? void 0 : oo.typography)
},
"& .image-wrapper": {
...R(w, (e) => {
var t, i, r, a;
return {
width: s((i = (t = o.image) == null ? void 0 : t.size) == null ? void 0 : i[e]),
height: s((a = (r = o.image) == null ? void 0 : r.size) == null ? void 0 : a[e])
};
})
}
},
"& .slick-slider": {
"& .arrow": {
position: "absolute",
display: "flex",
justifyContent: "center",
alignItems: "center",
cursor: "pointer",
transform: "translateY(-50%)",
zIndex: 2,
transition: "all 200ms ease-in-out",
...R(w, (e) => {
var r, a, l, d, c, p, h, g, f, n, m, u, v, y, b;
const t = (l = (a = (r = o.slider) == null ? void 0 : r.navigation) == null ? void 0 : a.leftArrowPosition) == null ? void 0 : l[e], i = (p = (c = (d = o.slider) == null ? void 0 : d.navigation) == null ? void 0 : c.rightArrowPosition) == null ? void 0 : p[e];
return {
width: s((f = (g = (h = o.slider) == null ? void 0 : h.navigation) == null ? void 0 : g.arrowWidth) == null ? void 0 : f[e]),
height: s((u = (m = (n = o.slider) == null ? void 0 : n.navigation) == null ? void 0 : m.arrowHeight) == null ? void 0 : u[e]),
fontSize: s((b = (y = (v = o.slider) == null ? void 0 : v.navigation) == null ? void 0 : y.arrowSize) == null ? void 0 : b[e]) ?? "22px",
...H((x) => {
var G, S, C, T, B, E, $, I, z, D, L, M, P, W, N;
return {
color: (T = (C = (S = (G = o.slider) == null ? void 0 : G.navigation) == null ? void 0 : S.arrowColor) == null ? void 0 : C[e]) == null ? void 0 : T[x],
backgroundColor: (I = ($ = (E = (B = o.slider) == null ? void 0 : B.navigation) == null ? void 0 : E.arrowBackgroudColor) == null ? void 0 : $[e]) == null ? void 0 : I[x],
boxShadow: to(
(L = (D = (z = o.slider) == null ? void 0 : z.navigation) == null ? void 0 : D.arrowBoxShadow) == null ? void 0 : L[x]
),
...no(
(N = (W = (P = (M = o.slider) == null ? void 0 : M.navigation) == null ? void 0 : P.arrowRadius) == null ? void 0 : W[e]) == null ? void 0 : N[x]
)
};
}),
"&.arrow-left": {
top: (t == null ? void 0 : t.top) ?? "50%",
right: t == null ? void 0 : t.right,
bottom: t == null ? void 0 : t.bottom,
left: (t == null ? void 0 : t.left) ?? 0
},
"&.arrow-right": {
top: (i == null ? void 0 : i.top) ?? "50%",
right: (i == null ? void 0 : i.right) ?? 0,
bottom: i == null ? void 0 : i.bottom,
left: i == null ? void 0 : i.left
}
};
})
},
"& .slick-dots": {
position: "absolute",
display: "flex !important",
justifyContent: "center",
alignItems: "center",
listStyle: "none",
padding: 0,
margin: 0,
zIndex: 2,
height: "fit-content",
width: "fit-content",
...R(w, (e) => {
var i, r, a, l, d, c, p, h, g, f, n, m, u, v, y, b, x, G, S, C, T, B, E, $, I, z, D, L, M, P, W, N, eo;
const t = j(
(a = (r = (i = o.slider) == null ? void 0 : i.navigation) == null ? void 0 : r.dotsPosition) == null ? void 0 : a[e]
);
return {
gap: s((c = (d = (l = o.slider) == null ? void 0 : l.navigation) == null ? void 0 : d.dotGap) == null ? void 0 : c[e]) ?? "15px",
top: t.top,
right: t.right,
bottom: t.bottom,
left: t.left ? t.left : t.right ? void 0 : "50%",
transform: t.left || t.right ? void 0 : "translateX(-50%)",
"& li": {
cursor: "unset",
"& .dot": {
margin: "0 5px",
cursor: "pointer",
borderRadius: s((g = (h = (p = o.slider) == null ? void 0 : p.navigation) == null ? void 0 : h.dotRadius) == null ? void 0 : g[e]) ?? "50%",
backgroundColor: ((u = (m = (n = (f = o.slider) == null ? void 0 : f.navigation) == null ? void 0 : n.dotColor) == null ? void 0 : m[e]) == null ? void 0 : u.default) ?? "rgba(0,0,0,0.2)",
display: "block",
width: s((b = (y = (v = o.slider) == null ? void 0 : v.navigation) == null ? void 0 : y.dotWidth) == null ? void 0 : b[e]) ?? "10px",
height: s((S = (G = (x = o.slider) == null ? void 0 : x.navigation) == null ? void 0 : G.dotHeight) == null ? void 0 : S[e]) ?? "10px"
},
"&:hover": {
"& .dot": {
backgroundColor: (E = (B = (T = (C = o.slider) == null ? void 0 : C.navigation) == null ? void 0 : T.dotActiveColor) == null ? void 0 : B[e]) == null ? void 0 : E.default
}
},
"&.slick-active": {
"& .dot": {
backgroundColor: ((D = (z = (I = ($ = o.slider) == null ? void 0 : $.navigation) == null ? void 0 : I.dotActiveColor) == null ? void 0 : z[e]) == null ? void 0 : D.default) ?? "rgba(0,0,0,0.8)",
width: s(
(P = (M = (L = o.slider) == null ? void 0 : L.navigation) == null ? void 0 : M.activeDotWidth) == null ? void 0 : P[e]
) ?? "10px",
height: s(
(eo = (N = (W = o.slider) == null ? void 0 : W.navigation) == null ? void 0 : N.activeDotHeight) == null ? void 0 : eo[e]
) ?? "10px"
}
}
}
};
})
},
...R(w, (e) => {
var t, i, r, a, l, d, c, p, h, g, f, n, m, u;
return {
"& .slick-slide > div": {
height: s((i = (t = o.slider) == null ? void 0 : t.height) == null ? void 0 : i[e]),
margin: `0 ${(a = (r = o.columnGap) == null ? void 0 : r[e]) != null && a.value ? `${Number((d = (l = o.columnGap) == null ? void 0 : l[e]) == null ? void 0 : d.value) / 2}${(p = (c = o.columnGap) == null ? void 0 : c[e]) == null ? void 0 : p.unit}` : 0} `
},
"& .slick-list": {
margin: `0 ${(g = (h = o.columnGap) == null ? void 0 : h[e]) != null && g.value ? `-${Number((n = (f = o.columnGap) == null ? void 0 : f[e]) == null ? void 0 : n.value) / 2}${(u = (m = o.columnGap) == null ? void 0 : m[e]) == null ? void 0 : u.unit}` : 0} `
}
};
})
}
};
},
controls: [
{
label: "Content",
component: V(() => import("./components/testimonial-content.control.js"))
},
{
label: "Style",
component: V(() => import("./components/testimonial-style.control.js"))
}
]
});
export {
yo as default
};
//# sourceMappingURL=testimonial.config.js.map