Worked on Gallery Page

This commit is contained in:
Sarim-Sheikh-2003
2024-01-03 15:40:30 -07:00
parent 6147999572
commit 1bf68aeb18
4 changed files with 137 additions and 2 deletions

42
src/Gallery/Gallery.css Normal file
View File

@ -0,0 +1,42 @@
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
grid-gap: 10px;
}
@media screen and (max-width: 767px) {
.gallery {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-gap: 5px;
}
}
.galleryItem {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.2s ease-in-out;
}
.galleryItem:hover {
transform: scale(1.05);
}
.container {
position: relative;
width: 40%;
}
.modalImage {
width: 100%;
}
.modalButton {
position: absolute;
padding: 16px;
background-color: green;
border-radius: 16px;
bottom: 10px;
left: 200px;
width: 100px;
}

View File

@ -1,5 +1,60 @@
import Modal from 'react-modal';
import { useState } from "react";
import './Gallery.css';
const images = [
{ src: 'https://i.pinimg.com/736x/70/28/0f/70280f1b75ea956f4fdef7e31336d9f0.jpg', alt: 'Image 1' },
{ src: 'https://wallpapers.com/images/featured-full/cool-anime-6kbwj9794wpnsfr1.jpg', alt: 'Image 2' },
{ src: 'https://wallpapers.com/images/featured/cool-anime-pfp-pictures-71urutpksg13vkbk.jpg', alt: 'Image 3' },
{ src: 'https://i.pinimg.com/236x/ab/dc/52/abdc52db893674a7b5dcb767be8776e5.jpg', alt: 'Image 4' },
{ src: 'https://qph.cf2.quoracdn.net/main-qimg-a3fdbac7bf9f8db58f147887ffa76d88-lq', alt: 'Image 5' }
];
export default function Gallery() {
const [open, setOpen] = useState(false)
const [display, setDisplay] = useState('')
const handleClick = (arg) => {
console.log("Test")
setDisplay(arg)
setOpen(true)
console.log(open)
}
return (
<p>Gallery</p>
<div>
<div className="gallery">
{images.map((image, index) => (
<img
key={index}
className="galleryItem"
src={image.src}
alt={image.alt}
onClick={() => handleClick(image.src)}
/>
))}
</div>
<div>
<Modal
isOpen={open}
onRequestClose={() => setOpen(false)}
style={{
overlay: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
},
content: {
position: 'initial'
}
}}
>
<div className="container">
<button className="modalButton" onClick={() => setOpen(false)}>x</button>
<img className="modalImage" src={display} onClick={() => setOpen(false)} />
</div>
</Modal>
</div>
</div>
);
};
}