@frontify/fondue
Version:
Design system of Frontify
48 lines (47 loc) • 2.28 kB
JavaScript
import { jsx as t, jsxs as e } from "react/jsx-runtime";
import { IconCaretRight as m } from "@frontify/fondue-icons";
import { useButton as n } from "@react-aria/button";
import { useFocusRing as w } from "@react-aria/focus";
import { mergeProps as b } from "@react-aria/utils";
import { useRef as u } from "react";
import { FOCUS_STYLE as f } from "../../../utilities/focusStyle.es.js";
import { merge as p } from "../../../utilities/merge.es.js";
import { SelectedAssetsThumbnail as h } from "./SelectedAssetsThumbnail.es.js";
const S = ({ numberOfLocations: r, assets: s, onClick: l }) => {
const o = u(null), { buttonProps: a } = n({ onPress: l }, o), { isFocusVisible: c, focusProps: d } = w(), i = s.length;
return /* @__PURE__ */ t("div", { "data-test-id": "multi-asset-preview", children: /* @__PURE__ */ e(
"button",
{
type: "button",
title: "multi-asset-preview",
...b(a, d),
ref: o,
className: p([
"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 ? `${f} tw-border-black-90 dark:tw-border-black-10` : "tw-border-black-20 dark:tw-border-black-80"
]),
children: [
/* @__PURE__ */ t(h, { 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(m, { size: 24 }) }) })
] })
]
}
) });
};
export {
S as MultiAssetPreview
};
//# sourceMappingURL=MultiAssetPreview.es.js.map