@blocklet/payment-react/es/payment/error.js

Reusable react components for payment kit v2

import { jsx, jsxs } from "react/jsx-runtime";
import { Button, Link, Stack, Typography } from "@mui/material";
function getHeightStyle(mode) {
  switch (mode) {
    case "standalone":
      return { height: "100vh", maxHeight: "100%" };
    // 独立模式下，高度为100vh
    default:
      return { height: "auto", minHeight: 200 };
  }
}
export default function PaymentError({ title, description, button = "Back", mode = "standalone" }) {
  const heightStyle = getHeightStyle(mode);
  return /* @__PURE__ */ jsx(
    Stack,
    {
      sx: [
        {
          alignItems: "center",
          justifyContent: "center"
        },
        ...Array.isArray(heightStyle) ? heightStyle : [heightStyle]
      ],
      children: /* @__PURE__ */ jsxs(
        Stack,
        {
          direction: "column",
          sx: {
            alignItems: "center",
            justifyContent: "center",
            width: "280px"
          },
          children: [
            /* @__PURE__ */ jsx(Typography, { variant: "h5", sx: { mb: 2 }, children: title }),
            /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { mb: 2, textAlign: "center" }, children: description }),
            typeof button === "string" ? /* @__PURE__ */ jsx(
              Button,
              {
                variant: "text",
                size: "small",
                sx: { color: "text.link" },
                component: Link,
                href: window.blocklet?.appUrl,
                children: button
              }
            ) : button
          ]
        }
      )
    }
  );
}