@blocklet/payment-react
Version:
Reusable react components for payment kit v2
89 lines (88 loc) • 2.36 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { Avatar, Box, Stack, Typography } from "@mui/material";
export default function ProductCard({
size = 48,
variant = "rounded",
name,
logo = "",
description = "",
extra = void 0
}) {
const s = { width: size, height: size };
return /* @__PURE__ */ jsxs(
Stack,
{
direction: "row",
spacing: 1,
sx: {
alignItems: "center",
flex: 2,
width: "100%"
},
children: [
logo ? (
// @ts-ignore
/* @__PURE__ */ jsx(Avatar, { src: logo, alt: name, variant, sx: s })
) : (
// @ts-ignore
/* @__PURE__ */ jsx(Avatar, { variant, sx: s, children: (name || "?").slice(0, 1) })
),
/* @__PURE__ */ jsxs(
Stack,
{
direction: "column",
sx: {
alignItems: "flex-start",
justifyContent: "space-around",
flexShrink: 1,
overflow: "hidden"
},
children: [
/* @__PURE__ */ jsx(
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__ */ jsx(
Typography,
{
variant: "body1",
title: description,
sx: {
color: "text.lighter",
fontSize: "0.74375rem",
mb: 0.5,
lineHeight: 1.2,
textAlign: "left"
},
children: description
}
),
extra && /* @__PURE__ */ jsx(
Box,
{
sx: {
color: "text.lighter",
fontSize: "0.74375rem"
},
children: extra
}
)
]
}
)
]
}
);
}