@frontify/fondue
Version:
Design system of Frontify
53 lines (52 loc) • 1.71 kB
JavaScript
import { jsxs as s, jsx as a } from "react/jsx-runtime";
import { cloneElement as o } from "react";
import c from "../../foundation/Icon/Generated/IconMusicNote.es.js";
import { IconSize as n } from "../../foundation/Icon/IconSize.es.js";
import { merge as m } from "../../utilities/merge.es.js";
import { AssetInputSize as u } from "./AssetInput.es.js";
const d = (t, e) => {
switch (!0) {
case t === u.Large:
return "tw-w-full tw-h-32";
case e:
return "tw-w-11 tw-h-11";
default:
return "tw-w-14 tw-h-full";
}
}, w = ({
asset: t,
size: e,
isActive: l = !1,
isMultiAsset: r = !1
}) => {
const i = t.type === "icon" || t.type === "audio" ? t.type : "default";
return /* @__PURE__ */ s(
"div",
{
className: m([
"tw-flex tw-flex-none tw-items-center tw-justify-center tw-bg-black-5 dark:tw-bg-black-95",
d(e, r),
l ? "tw-text-black-100 dark:tw-text-white" : "tw-text-black-80 dark:tw-text-black-20"
]),
"data-test-id": "asset-input-thumbnail",
children: [
i === "icon" && /* @__PURE__ */ a("span", { "data-test-id": "asset-input-thumbnail-icon", children: t.icon && o(t.icon, { size: n.Size24 }) }),
i === "audio" && /* @__PURE__ */ a(c, { size: n.Size24, "data-test-id": "asset-input-thumbnail-audio" }),
i === "default" && /* @__PURE__ */ a(
"img",
{
src: t.src,
alt: t.alt || "",
className: "tw-max-h-full",
"data-test-id": "asset-input-thumbnail-image"
}
)
]
}
);
};
w.displayName = "FondueAssetThumbnail";
export {
w as AssetThumbnail
};
//# sourceMappingURL=AssetThumbnail.es.js.map