@frontify/fondue
Version:
Design system of Frontify
37 lines (36 loc) • 1.35 kB
JavaScript
import { jsx as s } from "react/jsx-runtime";
import { merge as l } from "../../../utilities/merge.es.js";
import { AssetInputSize as m } from "../AssetInput.es.js";
import { AssetThumbnail as a } from "../AssetThumbnail.es.js";
const c = (t) => t.type === "image" || t.type === "logo", n = ({ assets: t }) => {
const r = t.length, i = t.slice(0, 4);
if (r < 4)
for (const [e] of [...Array(4 - r)].entries())
i.push({
name: `empty picture ${e + 1}`,
size: 20,
type: "image",
extension: "",
src: "",
source: "upload"
});
return /* @__PURE__ */ s("div", { className: "tw-border-black-20 tw-grid tw-grid-cols-2 tw-gap-0.5", children: i.map(
(e, o) => c(e) ? /* @__PURE__ */ s(
"div",
{
"data-test-id": "assets-image",
style: e.src ? { backgroundImage: `url(${e.src})` } : {},
className: l([
o === 0 ? "tw-rounded-tl" : o === 2 && "tw-rounded-bl",
"tw-h-11 tw-w-11 tw-bg-black-5"
])
},
e.name
) : /* @__PURE__ */ s("div", { className: "tw-h-11 tw-w-11", children: /* @__PURE__ */ s(a, { asset: e, size: m.Small, isMultiAsset: !0 }) }, e.src)
) });
};
n.displayName = "FondueSelectedAssetsThumbnail";
export {
n as SelectedAssetsThumbnail
};
//# sourceMappingURL=SelectedAssetsThumbnail.es.js.map