bereact-ui/dist/HoloCard-Co20M13i.js

Bibliothèque de composants React open-source

import { j as s } from "./jsx-runtime-foPj8jHJ.js";
import { useRef as v, useCallback as c, useEffect as j } from "react";
function H({ content: a, pattern: o, beginWithEffect: p, endKeepEffect: i, size: d }) {
  const r = v(null), P = c(() => {
    const e = r.current;
    e && (e.style.setProperty("--x", "50%"), e.style.setProperty("--y", "50%"), e.style.setProperty("--bg-x", "50%"), e.style.setProperty("--bg-y", "50%"), e.style.setProperty("--r-x", "0deg"), e.style.setProperty("--r-y", "0deg"), i || e.style.setProperty("--patternPath", null));
  }, []), u = c((e) => {
    const t = r.current;
    if (t) {
      const g = t.clientWidth, f = t.clientHeight, n = t.getBoundingClientRect(), l = (e.clientX - n.left) / g, y = (e.clientY - n.top) / f, h = -(l - 0.5) * 26, b = (y - 0.5) * 26, m = 40 + 20 * l, _ = 40 + 20 * y;
      t.style.setProperty("--x", 100 * l + "%"), t.style.setProperty("--y", 100 * y + "%"), t.style.setProperty("--bg-x", m + "%"), t.style.setProperty("--bg-y", _ + "%"), t.style.setProperty("--r-x", h + "deg"), t.style.setProperty("--r-y", b + "deg"), t.style.setProperty("--patternPath", "url(" + o + ")");
    }
  }, []);
  j(() => {
    if (p) {
      const e = r.current;
      e && (e.style.setProperty("--x", "50%"), e.style.setProperty("--y", "50%"), e.style.setProperty("--bg-x", "50%"), e.style.setProperty("--bg-y", "50%"), e.style.setProperty("--r-x", "0deg"), e.style.setProperty("--r-y", "0deg"), e.style.setProperty("--patternPath", "url(" + o + ")"));
    }
  }, [r]);
  const x = {
    "--patternPath": "url(" + o + ")",
    width: d + "px"
  };
  return /* @__PURE__ */ s.jsx("div", { className: "bereact_ui_holoCard", ref: r, style: x, onMouseMove: u, onMouseLeave: P, children: /* @__PURE__ */ s.jsx("div", { className: "card__wrapper", children: /* @__PURE__ */ s.jsxs("div", { className: "card__3d", children: [
    /* @__PURE__ */ s.jsx("div", { className: "card__content", children: a }),
    /* @__PURE__ */ s.jsx("div", { className: "card__layer2" })
  ] }) }) });
}
export {
  H
};