@blocklet/payment-react/lib/payment/product-skeleton.js

Reusable react components for payment kit v2

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
module.exports = ProductSkeleton;
var _jsxRuntime = require("react/jsx-runtime");
var _material = require("@mui/material");
function ProductSkeleton({
  count
}) {
  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
    in: true,
    children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.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__ */(0, _jsxRuntime.jsx)(_material.Typography, {
        component: "div",
        variant: "h4",
        sx: {
          width: "50%"
        },
        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {})
      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
        variant: "text",
        sx: {
          fontSize: "0.875rem",
          width: "60%"
        }
      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
        component: "div",
        variant: "h3",
        sx: {
          width: "60%"
        },
        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {})
      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
        component: "div",
        variant: "h3",
        sx: {
          width: "100%"
        },
        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {})
      }), Array.from({
        length: count
      }).map((_, i) =>
      // eslint-disable-next-line react/no-array-index-key
      /* @__PURE__ */
      (0, _jsxRuntime.jsx)(_material.Skeleton, {
        variant: "text",
        sx: {
          fontSize: "0.875rem",
          width: "60%"
        }
      }, i))]
    })
  });
}