@frontify/fondue
Version:
Design system of Frontify
48 lines (47 loc) • 2.35 kB
JavaScript
import { jsx as t, jsxs as e } from "react/jsx-runtime";
import { useButton as d } from "@react-aria/button";
import { useFocusRing as n } from "@react-aria/focus";
import { mergeProps as w } from "@react-aria/utils";
import { useRef as b } from "react";
import u from "../../../foundation/Icon/Generated/IconCaretRight.es.js";
import { IconSize as f } from "../../../foundation/Icon/IconSize.es.js";
import { FOCUS_STYLE as p } from "../../../utilities/focusStyle.es.js";
import { merge as h } from "../../../utilities/merge.es.js";
import { SelectedAssetsThumbnail as v } from "./SelectedAssetsThumbnail.es.js";
const j = ({ numberOfLocations: r, assets: s, onClick: l }) => {
const o = b(null), { buttonProps: a } = d({ onPress: l }, o), { isFocusVisible: c, focusProps: m } = n(), i = s.length;
return /* @__PURE__ */ t("div", { "data-test-id": "multi-asset-preview", children: /* @__PURE__ */ e(
"button",
{
title: "multi-asset-preview",
...w(a, m),
ref: o,
className: h([
"tw-flex tw-border tw-rounded hover:tw-border-black-90 dark:hover:tw-border-black-40 focus-visible:tw-outline-none dark:tw-text-white tw-mb-4 tw-w-full",
c ? `${p} tw-border-black-90 dark:tw-border-black-10` : "tw-border-black-20 dark:tw-border-black-80"
]),
children: [
/* @__PURE__ */ t(v, { assets: s }),
/* @__PURE__ */ e("div", { className: "tw-py-6 tw-px-4 tw-flex", children: [
/* @__PURE__ */ e("div", { className: "tw-text-left", children: [
/* @__PURE__ */ e("div", { className: "tw-font-bold tw-text-m", "data-test-id": "assets-amount", children: [
i,
" ",
i === 1 ? "Asset" : "Assets"
] }),
/* @__PURE__ */ e("div", { className: "tw-text-black-60 tw-text-s tw-mt-1", "data-test-id": "number-of-locations", children: [
r,
" ",
r === 1 ? "location" : "locations"
] })
] }),
/* @__PURE__ */ t("div", { className: "tw-flex tw-items-center tw-text-black-70 tw-pl-4", children: /* @__PURE__ */ t("div", { className: "tw-absolute tw-right-12", children: /* @__PURE__ */ t(u, { size: f.Size24 }) }) })
] })
]
}
) });
};
export {
j as MultiAssetPreview
};
//# sourceMappingURL=MultiAssetPreview.es.js.map