UNPKG

@blocklet/payment-react

Version:

Reusable react components for payment kit v2

70 lines (69 loc) 2.01 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); module.exports = DonationSkeleton; var _jsxRuntime = require("react/jsx-runtime"); var _material = require("@mui/material"); function DonationSkeleton() { return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, { in: true, children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, { direction: "column", children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, { variant: "text", sx: { fontSize: "1.75rem", width: "40%" } }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, { sx: { mt: 2 }, variant: "rounded", height: 40 }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Divider, { sx: { mt: { xs: "16px", md: "16px" }, mb: { xs: "16px", md: "16px" } } }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, { direction: "row", spacing: 2, sx: { justifyContent: "space-between" }, children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, { variant: "text", sx: { fontSize: "1.5rem", width: "40%" } }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, { children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, { height: 60, width: 80 }) }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, { children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, { height: 60, width: 120 }) })] })] })] }) }); }