@blocklet/payment-react
Version:
Reusable react components for payment kit v2
70 lines (69 loc) • 2.01 kB
JavaScript
;
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
})
})]
})]
})]
})
});
}