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