@blocklet/payment-react/es/payment/form/currency.js

Reusable react components for payment kit v2

import { jsx, jsxs } from "react/jsx-runtime";
import { Avatar, Card, Radio, Stack, Typography } from "@mui/material";
import { styled } from "@mui/system";
export default function CurrencySelector({ value, currencies, onChange }) {
  return /* @__PURE__ */ jsx(
    Root,
    {
      className: "cko-currency-selector",
      count: currencies.length,
      style: {
        display: currencies.length > 1 ? "grid" : "block",
        width: "100%",
        gap: 12,
        gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))"
      },
      children: currencies.map((x) => {
        const selected = x.id === value;
        return /* @__PURE__ */ jsx(
          Card,
          {
            variant: "outlined",
            onClick: () => onChange(x.id, x.method?.id),
            className: selected ? "cko-payment-card" : "cko-payment-card-unselect",
            children: /* @__PURE__ */ jsxs(
              Stack,
              {
                direction: "row",
                sx: {
                  alignItems: "center",
                  position: "relative"
                },
                children: [
                  /* @__PURE__ */ jsx(Avatar, { src: x.logo, alt: x.name, sx: { width: 40, height: 40, marginRight: "12px" } }),
                  /* @__PURE__ */ jsxs("div", { children: [
                    /* @__PURE__ */ jsx(
                      Typography,
                      {
                        variant: "h5",
                        component: "div",
                        sx: { fontSize: "16px", color: "text.primary", fontWeight: "500" },
                        children: x.symbol
                      }
                    ),
                    /* @__PURE__ */ jsx(
                      Typography,
                      {
                        gutterBottom: true,
                        sx: {
                          color: "text.lighter",
                          fontSize: 14
                        },
                        children: x.method.name
                      }
                    )
                  ] }),
                  /* @__PURE__ */ jsx(
                    Radio,
                    {
                      checked: selected,
                      sx: {
                        position: "absolute",
                        right: 0
                      }
                    }
                  )
                ]
              }
            )
          },
          x.id
        );
      })
    }
  );
}
const Root = styled("section")`
  .cko-payment-card {
    position: relative;
    border: 1px solid;
    border-color: ${({ theme }) => theme.palette.primary.main};
    padding: 4px 8px;
    cursor: pointer;
    background: ${({ theme }) => theme.palette.grey[50]};
  }

  .cko-payment-card-unselect {
    border: 1px solid;
    border-color: ${({ theme }) => theme.palette.divider};
    padding: 4px 8px;
    cursor: pointer;
    background: ${({ theme }) => theme.palette.grey[50]};
  }
`;