bereact-ui
Version:
Bibliothèque de composants React open-source
2 lines (1 loc) • 1.73 kB
JavaScript
;const r=require("./jsx-runtime-CdzQHM_M.cjs"),o=require("react");function _({content:i,pattern:l,beginWithEffect:a,endKeepEffect:p,size:d}){const s=o.useRef(null),u=o.useCallback(()=>{const e=s.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"),p||e.style.setProperty("--patternPath",null))},[]),x=o.useCallback(e=>{const t=s.current;if(t){const g=t.clientWidth,h=t.clientHeight,c=t.getBoundingClientRect(),y=(e.clientX-c.left)/g,n=(e.clientY-c.top)/h,b=-(y-.5)*26,f=(n-.5)*26,m=40+20*y,j=40+20*n;t.style.setProperty("--x",100*y+"%"),t.style.setProperty("--y",100*n+"%"),t.style.setProperty("--bg-x",m+"%"),t.style.setProperty("--bg-y",j+"%"),t.style.setProperty("--r-x",b+"deg"),t.style.setProperty("--r-y",f+"deg"),t.style.setProperty("--patternPath","url("+l+")")}},[]);o.useEffect(()=>{if(a){const e=s.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("+l+")"))}},[s]);const P={"--patternPath":"url("+l+")",width:d+"px"};return r.jsxRuntimeExports.jsx("div",{className:"bereact_ui_holoCard",ref:s,style:P,onMouseMove:x,onMouseLeave:u,children:r.jsxRuntimeExports.jsx("div",{className:"card__wrapper",children:r.jsxRuntimeExports.jsxs("div",{className:"card__3d",children:[r.jsxRuntimeExports.jsx("div",{className:"card__content",children:i}),r.jsxRuntimeExports.jsx("div",{className:"card__layer2"})]})})})}exports.HoloCard=_;