@blocklet/ui-react/lib/UserCenter/components/passport.js

Some useful front-end web components that can be used in Blocklets.

import { jsx as s } from "react/jsx-runtime";
import { Box as m } from "@mui/material";
import x from "@arcblock/ux/lib/Empty";
import { useTheme as y } from "@arcblock/ux/lib/Theme";
import g from "@arcblock/ux/lib/Passport";
import { PASSPORT_STATUS as h } from "@arcblock/ux/lib/Util/constant";
import { useMemoizedFn as C, useCreation as l } from "ahooks";
import f from "lodash/uniqBy";
import { translate as P } from "@arcblock/ux/lib/Locale/util";
import { useLocaleContext as k } from "@arcblock/ux/lib/Locale/context";
import { translations as v } from "../libs/locales.js";
import { createPassportSvg as S } from "../libs/utils.js";
function D({ user: o, ...a }) {
  const { locale: c } = k(), n = C((r, t = {}) => P(v, r, c, "en", t)), d = y(), e = l(() => {
    const r = (o?.passports || []).map((t) => ({
      ...t,
      revoked: t.status === h.REVOKED
    }));
    return r.sort((t, u) => t.revoked === u.revoked ? 0 : t.revoked ? 1 : -1), f(
      r.filter((t) => !t.display),
      "role"
    ).concat(
      f(
        r.filter((t) => t.display),
        "display.content"
      )
    );
  }, [o?.passports]), p = l(() => e?.find((r) => r.name === o.role), [e, o?.role]), i = d.palette.primary.main;
  return e.length === 0 ? /* @__PURE__ */ s(m, { children: /* @__PURE__ */ s(x, { children: n("noPassport") }) }) : /* @__PURE__ */ s(
    m,
    {
      ...a,
      sx: {
        display: "grid",
        justifyItems: "start",
        gridTemplateColumns: {
          xs: "repeat(2, 1fr)",
          sm: "repeat(2, 1fr)",
          md: "repeat(3, 1fr)",
          lg: "repeat(5, 1fr)"
        },
        gap: 2.5,
        ...a.sx
      },
      children: e.map((r) => /* @__PURE__ */ s(
        g,
        {
          passport: r,
          user: o,
          color: window.blocklet.passportColor,
          createPassportSvg: S,
          title: p && p.role === r.role ? n("currentPassport") : "",
          sx: {
            flexDirection: "column",
            alignItems: "center",
            gap: 1,
            ".passport-item__display": {
              width: 166,
              height: 166,
              borderRadius: 1,
              px: 2,
              display: "flex",
              justifyContent: "center",
              backgroundColor: "grey.50",
              boxShadow: p && p.role === r.role ? `0px 2px 4px 0px ${i}, 0px 1px 2px -1px ${i}, 0px 0px 0px 1px ${i} !important` : "unset"
            },
            ".passport-item__body": {
              marginLeft: "0 !important"
            }
          }
        },
        r.id
      ))
    }
  );
}
export {
  D as default
};