@blocklet/payment-react/es/checkout-v2/components/right/currency-grid.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/material/styles";
const CurrencyRoot = styled("section")`
  display: grid;
  width: 100%;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

  .cko-payment-card {
    position: relative;
    border: 1px solid ${({ theme }) => theme.palette.primary.main};
    padding: 4px 8px;
    cursor: pointer;
    background: ${({ theme }) => theme.palette.grey[50]};
  }

  .cko-payment-card-unselect {
    border: 1px solid ${({ theme }) => theme.palette.divider};
    padding: 4px 8px;
    cursor: pointer;
    background: ${({ theme }) => theme.palette.grey[50]};
  }
`;
export default function CurrencyGrid({ currencies, selectedId, onSelect }) {
  if (!currencies?.length) return null;
  return /* @__PURE__ */ jsx(CurrencyRoot, { style: { display: currencies.length > 1 ? "grid" : "block" }, children: currencies.map((cur) => {
    const selected = cur.id === selectedId;
    const methodName = cur.method?.name || cur.name || "";
    return /* @__PURE__ */ jsx(
      Card,
      {
        variant: "outlined",
        onClick: () => onSelect(cur.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: cur.logo, alt: cur.name, sx: { width: 40, height: 40, mr: "12px" } }),
          /* @__PURE__ */ jsxs("div", { children: [
            /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 16, color: "text.primary", fontWeight: 500 }, children: cur.symbol }),
            /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary", fontSize: 14 }, children: methodName })
          ] }),
          /* @__PURE__ */ jsx(Radio, { checked: selected, sx: { position: "absolute", right: 0 } })
        ] })
      },
      cur.id
    );
  }) });
}