@blocklet/ui-react/lib/Dashboard/app-shell/badges/app-badge-switch.js

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

import { jsxs as l, jsx as i } from "react/jsx-runtime";
import { useTheme as m, Typography as g, Box as h } from "@mui/material";
import { useMemoizedFn as f } from "ahooks";
import { BadgeContainer as u } from "./app-badge-default.js";
function C({
  label: n = "",
  value: r = void 0,
  trueValue: s = !0,
  falseValue: t = !1,
  loading: a = !1,
  onChange: c = void 0,
  ...d
}) {
  const e = m();
  let o = !1;
  const p = f(() => c?.(!o));
  return r === s ? o = !0 : r === t ? o = !1 : o = !!r, /* @__PURE__ */ l(
    u,
    {
      loading: a,
      sx: {
        cursor: "pointer",
        backgroundColor: o ? "primary.main" : "grey.100",
        borderColor: o ? "primary.main" : "divider",
        transition: "background-color 0.3s ease"
      },
      onClick: p,
      ...d,
      children: [
        /* @__PURE__ */ i(
          g,
          {
            sx: {
              fontWeight: 400,
              paddingLeft: o ? 0 : e.spacing(2.5),
              paddingRight: o ? e.spacing(2.5) : 0,
              color: o ? "common.white" : "text.secondary",
              transition: "color 0.3s ease"
            },
            children: n
          }
        ),
        /* @__PURE__ */ i(
          h,
          {
            sx: {
              width: e.spacing(2.5),
              height: e.spacing(2.5),
              borderRadius: `${e.shape.borderRadius * 0.5}px`,
              backgroundColor: "common.white",
              position: "absolute",
              top: "50%",
              left: o ? `calc(100% - ${e.spacing(3)})` : e.spacing(0.5),
              transform: "translateY(-50%)",
              transition: "left 0.3s ease",
              boxShadow: 1
            }
          }
        )
      ]
    }
  );
}
export {
  C as AppBadgeSwitch
};