File size: 1,268 Bytes
cb5d9d0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | import React from "react";
interface MaskLayerProps {
maskUrl: string;
color: string;
onMouseEnter: (maskUrl: string) => void;
onClick: (maskUrl: string) => void;
}
/**
* Componente para renderizar una única capa de máscara.
* Usa React.memo para evitar re-renderizados si las props no cambian.
*/
const MaskLayer = React.memo(function MaskLayer({
maskUrl,
color,
onMouseEnter,
onClick,
}: MaskLayerProps) {
// Creamos los manejadores de eventos aquí para pasar la URL de la máscara.
// Como el componente está memoizado, estas funciones solo se recrean si las props cambian.
const handleMouseEnter = () => onMouseEnter(maskUrl);
const handleClick = () => onClick(maskUrl);
return (
<div
className="absolute top-0 left-0 w-full h-full transition-opacity duration-200"
style={{
backgroundColor: color,
maskImage: `url(${maskUrl})`,
WebkitMaskImage: `url(${maskUrl})`,
maskSize: "contain",
WebkitMaskSize: "contain",
maskRepeat: "no-repeat",
WebkitMaskRepeat: "no-repeat",
maskPosition: "center",
WebkitMaskPosition: "center",
}}
onMouseEnter={handleMouseEnter}
onClick={handleClick}
/>
);
});
export default MaskLayer;
|