@dndbuilder.com/react
Version:
Drag and drop builder for React
371 lines (370 loc) • 11.2 kB
JavaScript
"use client";
import { jsxs as o, jsx as e } from "react/jsx-runtime";
import { ColorControl as a } from "../../../components/controls/color.control.js";
import { SelectControl as C } from "../../../components/controls/select.control.js";
import { SliderInputControl as f } from "../../../components/controls/slider-input.control.js";
import { SliderUnitControl as s } from "../../../components/controls/slider-unit.control.js";
import { ToggleGroupControl as m } from "../../../components/controls/toggle-group.control.js";
import { TypographyControl as g } from "../../../components/controls/typography.control.js";
import { Accordion as l } from "../../../components/shared/accordion.js";
import { Tabs as n } from "../../../components/shared/tabs.js";
import { SettingsType as t } from "../../../types/index.js";
import { Unit as r, PseudoClass as i } from "../../../types/style.js";
import { AiOutlineAlignLeft as p, AiOutlineAlignCenter as c, AiOutlineAlignRight as d } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/ai/index.js";
import { TfiAlignJustify as u } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/tfi/index.js";
const D = () => /* @__PURE__ */ o(l, { defaultValue: "Card", type: "single", collapsible: !0, children: [
/* @__PURE__ */ o(l.Item, { value: "Card", children: [
/* @__PURE__ */ e(l.Trigger, { className: "p-4", children: "Card" }),
/* @__PURE__ */ e(l.Content, { className: "px-4", children: /* @__PURE__ */ e(
s,
{
responsive: !0,
label: "Padding",
fieldName: "card.padding",
type: t.BLOCK,
units: [r.PX, r.EM, r.REM]
}
) })
] }),
/* @__PURE__ */ o(l.Item, { value: "Image", children: [
/* @__PURE__ */ e(l.Trigger, { className: "p-4", children: "Image" }),
/* @__PURE__ */ o(l.Content, { className: "px-4", children: [
/* @__PURE__ */ e(
C,
{
responsive: !0,
label: "Image fit",
fieldName: "image.fit",
type: t.BLOCK,
mode: i.DEFAULT,
options: [
{ content: "Auto", value: "auto" },
{ content: "Cover", value: "cover" },
{ content: "Contain", value: "contain" }
],
className: "mt-0"
}
),
/* @__PURE__ */ e(
a,
{
label: "Overlay color",
fieldName: "overlayColor.desktop",
type: t.BLOCK,
mode: i.DEFAULT
}
)
] })
] }),
/* @__PURE__ */ o(l.Item, { value: "Title", children: [
/* @__PURE__ */ e(l.Trigger, { className: "p-4", children: "Title" }),
/* @__PURE__ */ o(l.Content, { className: "px-4", children: [
/* @__PURE__ */ e(
m,
{
type: t.BLOCK,
fieldName: "title.alignment",
responsive: !0,
label: "Alignment",
className: "mt-0",
controls: [
{
tooltipContent: "Left",
toggleTrigger: /* @__PURE__ */ e(p, { className: "text-sm" }),
value: "left"
},
{
tooltipContent: "Center",
toggleTrigger: /* @__PURE__ */ e(c, { className: "text-sm" }),
value: "center"
},
{
tooltipContent: "Right",
toggleTrigger: /* @__PURE__ */ e(d, { className: "text-sm" }),
value: "right"
},
{
tooltipContent: "Justified",
toggleTrigger: /* @__PURE__ */ e(u, { className: "text-sm" }),
value: "justify"
}
]
}
),
/* @__PURE__ */ e(
a,
{
label: "Color",
fieldName: "title.color.desktop",
type: t.BLOCK,
mode: i.DEFAULT
}
),
/* @__PURE__ */ e(
g,
{
label: "Typography",
fieldName: "title.typography",
type: t.BLOCK
}
),
/* @__PURE__ */ e(
s,
{
responsive: !0,
label: "Spacing",
fieldName: "title.spacing",
type: t.BLOCK,
units: [r.PX, r.EM, r.REM]
}
)
] })
] }),
/* @__PURE__ */ o(l.Item, { value: "Subtitle", children: [
/* @__PURE__ */ e(l.Trigger, { className: "p-4", children: "Subtitle" }),
/* @__PURE__ */ o(l.Content, { className: "px-4", children: [
/* @__PURE__ */ e(
m,
{
responsive: !0,
type: t.BLOCK,
fieldName: "subTitle.alignment",
label: "Alignment",
className: "mt-0",
controls: [
{
tooltipContent: "Left",
toggleTrigger: /* @__PURE__ */ e(p, { className: "text-sm" }),
value: "left"
},
{
tooltipContent: "Center",
toggleTrigger: /* @__PURE__ */ e(c, { className: "text-sm" }),
value: "center"
},
{
tooltipContent: "Right",
toggleTrigger: /* @__PURE__ */ e(d, { className: "text-sm" }),
value: "right"
},
{
tooltipContent: "Justified",
toggleTrigger: /* @__PURE__ */ e(u, { className: "text-sm" }),
value: "justify"
}
]
}
),
/* @__PURE__ */ e(
a,
{
label: "Color",
fieldName: "subTitle.color.desktop",
type: t.BLOCK,
mode: i.DEFAULT
}
),
/* @__PURE__ */ e(
g,
{
label: "Typography",
fieldName: "subTitle.typography",
type: t.BLOCK
}
),
/* @__PURE__ */ e(
s,
{
responsive: !0,
label: "Spacing",
fieldName: "subTitle.spacing",
type: t.BLOCK,
units: [r.PX, r.EM, r.REM]
}
)
] })
] }),
/* @__PURE__ */ o(l.Item, { value: "Description", children: [
/* @__PURE__ */ e(l.Trigger, { className: "p-4", children: "Description" }),
/* @__PURE__ */ o(l.Content, { className: "px-4", children: [
/* @__PURE__ */ e(
m,
{
responsive: !0,
type: t.BLOCK,
fieldName: "description.alignment",
label: "Alignment",
className: "mt-0",
controls: [
{
tooltipContent: "Left",
toggleTrigger: /* @__PURE__ */ e(p, { className: "text-sm" }),
value: "left"
},
{
tooltipContent: "Center",
toggleTrigger: /* @__PURE__ */ e(c, { className: "text-sm" }),
value: "center"
},
{
tooltipContent: "Right",
toggleTrigger: /* @__PURE__ */ e(d, { className: "text-sm" }),
value: "right"
},
{
tooltipContent: "Justified",
toggleTrigger: /* @__PURE__ */ e(u, { className: "text-sm" }),
value: "justify"
}
]
}
),
/* @__PURE__ */ e(
a,
{
label: "Color",
fieldName: "description.color.desktop",
type: t.BLOCK,
mode: i.DEFAULT
}
),
/* @__PURE__ */ e(
g,
{
label: "Typography",
fieldName: "description.typography",
type: t.BLOCK
}
),
/* @__PURE__ */ e(
s,
{
responsive: !0,
label: "Spacing",
fieldName: "description.spacing",
type: t.BLOCK,
units: [r.PX, r.EM, r.REM]
}
)
] })
] }),
/* @__PURE__ */ o(l.Item, { value: "Button", children: [
/* @__PURE__ */ e(l.Trigger, { className: "p-4", children: "Button" }),
/* @__PURE__ */ o(l.Content, { className: "px-4", children: [
/* @__PURE__ */ e(
m,
{
responsive: !0,
type: t.BLOCK,
fieldName: "button.alignment",
label: "Alignment",
className: "mt-0",
controls: [
{
tooltipContent: "Left",
toggleTrigger: /* @__PURE__ */ e(p, { className: "text-sm" }),
value: "left"
},
{
tooltipContent: "Center",
toggleTrigger: /* @__PURE__ */ e(c, { className: "text-sm" }),
value: "center"
},
{
tooltipContent: "Right",
toggleTrigger: /* @__PURE__ */ e(d, { className: "text-sm" }),
value: "right"
},
{
tooltipContent: "Justified",
toggleTrigger: /* @__PURE__ */ e(u, { className: "text-sm" }),
value: "justify"
}
]
}
),
/* @__PURE__ */ o(n, { defaultValue: i.DEFAULT, children: [
/* @__PURE__ */ o(n.List, { className: "mb-2 mt-5 h-8 w-full rounded-full", children: [
/* @__PURE__ */ e(
n.Trigger,
{
className: "flex-1 rounded-full p-[3px] text-[13px]",
value: i.DEFAULT,
children: "Normal"
}
),
/* @__PURE__ */ e(
n.Trigger,
{
className: "flex-1 rounded-full p-[3px] text-[13px]",
value: i.HOVER,
children: "Hover"
}
)
] }),
/* @__PURE__ */ o(n.Content, { value: i.DEFAULT, children: [
/* @__PURE__ */ e(
a,
{
label: "Color",
fieldName: "button.color.desktop",
type: t.BLOCK,
mode: i.DEFAULT
}
),
/* @__PURE__ */ e(
a,
{
label: "Background Color",
fieldName: "button.backgroundColor",
type: t.BLOCK,
mode: i.DEFAULT
}
)
] }),
/* @__PURE__ */ o(n.Content, { value: i.HOVER, children: [
/* @__PURE__ */ e(
a,
{
label: "Color",
fieldName: "button.color.desktop",
type: t.BLOCK,
mode: i.HOVER
}
),
/* @__PURE__ */ e(
a,
{
label: "Background Color",
fieldName: "button.backgroundColor",
type: t.BLOCK,
mode: i.HOVER
}
),
/* @__PURE__ */ e(
f,
{
label: "Transition Duration",
fieldName: "transitionDuration",
type: t.BLOCK,
min: 0,
max: 1e4
}
)
] })
] }),
/* @__PURE__ */ e(
g,
{
label: "Typography",
fieldName: "button.typography",
type: t.BLOCK
}
)
] })
] })
] });
export {
D as default
};
//# sourceMappingURL=banner-style.control.js.map