@blocklet/payment-react
Version:
Reusable react components for payment kit v2
36 lines (35 loc) • 1.54 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { Fade, Skeleton, Stack, Typography } from "@mui/material";
export default function ProductSkeleton({ count }) {
return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(
Stack,
{
direction: "column",
spacing: 1,
sx: {
alignItems: "center",
padding: 4,
width: 320,
border: "1px solid",
borderColor: "divider",
borderRadius: 1,
transition: "border-color 0.3s ease 0s, box-shadow 0.3s ease 0s",
boxShadow: "0 4px 8px rgba(0, 0, 0, 20%)",
"&:hover": {
borderColor: "#ddd",
boxShadow: "0 8px 16px rgba(0, 0, 0, 20%)"
}
},
children: [
/* @__PURE__ */ jsx(Typography, { component: "div", variant: "h4", sx: { width: "50%" }, children: /* @__PURE__ */ jsx(Skeleton, {}) }),
/* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "0.875rem", width: "60%" } }),
/* @__PURE__ */ jsx(Typography, { component: "div", variant: "h3", sx: { width: "60%" }, children: /* @__PURE__ */ jsx(Skeleton, {}) }),
/* @__PURE__ */ jsx(Typography, { component: "div", variant: "h3", sx: { width: "100%" }, children: /* @__PURE__ */ jsx(Skeleton, {}) }),
Array.from({ length: count }).map((_, i) => (
// eslint-disable-next-line react/no-array-index-key
/* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "0.875rem", width: "60%" } }, i)
))
]
}
) });
}