import Imagen from '../Galeria/Imagen';
import styled from 'styled-components';
import useFotoModal from '../../Hooks/useFotoModal';
const Overlay = styled.div`
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
`;
const DialogEstilizado = styled.dialog`
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: transparent;
padding: 0;
border: 0;
width: 956px;
display: flex;
justify-content: center;
z-index: 1000;
form {
position: absolute;
top: 20px;
right: 20px;
button {
background: none;
border: none;
cursor: pointer;
img {
position: relative;
width: 24px;
left: -1rem;
bottom: 1.5rem;
height: 24px;
border: 1px solid #fff;
border-radius: 50%;
padding: 5px;
&:hover {
scale: 1.1;
transition: 0.3s;
}
}
}
}
`;
const ModalZoom = () => {
const {estaAbiertoModal, fotoSeleccionada, cerrarModal} = useFotoModal()
return (
<>
{estaAbiertoModal && (
<>
<Overlay onClick={cerrarModal} />
<DialogEstilizado open={!!fotoSeleccionada} onClose={()=>cerrarModal()}>
<Imagen foto={fotoSeleccionada} expandida={true} />
<form method="dialog">
<BotonIcono formMethod="dialog">
<img src="/iconos/cerrar.png" alt="Ícono de cerrar" />
</BotonIcono>
</form>
</DialogEstilizado>
</>
)}
</>
);
};
export default ModalZoom;
useFotoModal.jsx:5 Uncaught ReferenceError: useContext is not defined
at useFotoModal (useFotoModal.jsx:5:31)
at ModalZoom (index.jsx:58:61)
useFotoModal.jsx:5 Uncaught ReferenceError: useContext is not defined
at useFotoModal (useFotoModal.jsx:5:31)
at ModalZoom (index.jsx:58:61)
chunk-QXLG2TGQ.js?v=70490e87:19464 Uncaught ReferenceError: useContext is not defined
at useFotoModal (useFotoModal.jsx:5:31)
at ModalZoom (index.jsx:58:61)