synapse-react-client/dist/stories/ColorPaletteInspector.js

[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie

import { jsxs as n, jsx as r } from "react/jsx-runtime";
import { COLOR_PALETTE_ODD as l, COLOR_PALETTE_EVEN as h } from "../utils/functions/colorPalette.js";
import { Box as p } from "@mui/material";
import a from "tinycolor2";
function d({ color: e }) {
  return /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
    p,
    {
      sx: {
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        background: e,
        width: "100px",
        height: "20px",
        fontSize: "10px",
        color: e,
        "&:hover": {
          color: a(e).isDark() ? "white" : "black"
        }
      },
      children: e
    }
  ) });
}
function s() {
  return /* @__PURE__ */ n("div", { children: [
    /* @__PURE__ */ r("h2", { children: "Odd Palette" }),
    /* @__PURE__ */ r("div", { style: { display: "flex", flexWrap: "wrap" }, children: l.reduce(
      (e, t, i) => (i % 5 === 0 ? e.push([t]) : e[e.length - 1].push(t)) && e,
      []
    ).map((e, t) => /* @__PURE__ */ n("div", { children: [
      /* @__PURE__ */ n("p", { children: [
        "Odd ",
        t
      ] }),
      e.map((i) => /* @__PURE__ */ r(d, { color: i }, i))
    ] }, "odd" + t)) }),
    /* @__PURE__ */ r("hr", {}),
    /* @__PURE__ */ r("h2", { children: "Even Palette" }),
    /* @__PURE__ */ r("div", { style: { display: "flex", flexWrap: "wrap" }, children: h.reduce(
      (e, t, i) => (i % 5 === 0 ? e.push([t]) : e[e.length - 1].push(t)) && e,
      []
    ).map((e, t) => /* @__PURE__ */ n("div", { children: [
      /* @__PURE__ */ n("p", { children: [
        "Even ",
        t
      ] }),
      e.map((i) => /* @__PURE__ */ r(d, { color: i }, i))
    ] }, "even" + t)) }),
    " "
  ] });
}
export {
  s as default
};
//# sourceMappingURL=ColorPaletteInspector.js.map