@blocklet/payment-react
Version:
Reusable react components for payment kit v2
84 lines (83 loc) • 2 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
module.exports = ProductCard;
var _jsxRuntime = require("react/jsx-runtime");
var _material = require("@mui/material");
function ProductCard({
size = 48,
variant = "rounded",
name,
logo = "",
description = "",
extra = void 0
}) {
const s = {
width: size,
height: size
};
return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
direction: "row",
spacing: 1,
sx: {
alignItems: "center",
flex: 2,
width: "100%"
},
children: [logo ?
// @ts-ignore
/* @__PURE__ */
(0, _jsxRuntime.jsx)(_material.Avatar, {
src: logo,
alt: name,
variant,
sx: s
}) :
// @ts-ignore
/* @__PURE__ */
(0, _jsxRuntime.jsx)(_material.Avatar, {
variant,
sx: s,
children: (name || "?").slice(0, 1)
}), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
direction: "column",
sx: {
alignItems: "flex-start",
justifyContent: "space-around",
flexShrink: 1,
overflow: "hidden"
},
children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
className: "cko-ellipsis",
variant: "body1",
title: name,
sx: {
color: "text.primary",
fontWeight: 500,
mb: 0.5,
lineHeight: 1.2,
fontSize: 16
},
children: name
}), description && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
variant: "body1",
title: description,
sx: {
color: "text.lighter",
fontSize: "0.74375rem",
mb: 0.5,
lineHeight: 1.2,
textAlign: "left"
},
children: description
}), extra && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
sx: {
color: "text.lighter",
fontSize: "0.74375rem"
},
children: extra
})]
})]
});
}