mirror of
https://github.com/UofCBaja/BajaUofCWebsite.git
synced 2025-06-15 21:34:17 -06:00
Worked on Gallery Page
This commit is contained in:
Sarim-Sheikh-2003
parent
6147999572
commit
1bf68aeb18
37
package-lock.json
generated
37
package-lock.json
generated
@ -14,6 +14,7 @@
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-modal": "^3.16.1",
|
||||
"react-native": "^0.72.6",
|
||||
"react-router-dom": "^6.20.0",
|
||||
"react-scripts": "5.0.1",
|
||||
@ -9777,6 +9778,11 @@
|
||||
"url": "https://github.com/sindresorhus/execa?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/exenv": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
|
||||
"integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
|
||||
},
|
||||
"node_modules/exit": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
|
||||
@ -17850,6 +17856,29 @@
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
|
||||
},
|
||||
"node_modules/react-lifecycles-compat": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
|
||||
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
|
||||
},
|
||||
"node_modules/react-modal": {
|
||||
"version": "3.16.1",
|
||||
"resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
|
||||
"integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==",
|
||||
"dependencies": {
|
||||
"exenv": "^1.2.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-lifecycles-compat": "^3.0.0",
|
||||
"warning": "^4.0.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18",
|
||||
"react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18"
|
||||
}
|
||||
},
|
||||
"node_modules/react-native": {
|
||||
"version": "0.72.6",
|
||||
"resolved": "https://registry.npmjs.org/react-native/-/react-native-0.72.6.tgz",
|
||||
@ -20996,6 +21025,14 @@
|
||||
"makeerror": "1.0.12"
|
||||
}
|
||||
},
|
||||
"node_modules/warning": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
|
||||
"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/watchpack": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
|
||||
|
||||
@ -9,6 +9,7 @@
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-modal": "^3.16.1",
|
||||
"react-native": "^0.72.6",
|
||||
"react-router-dom": "^6.20.0",
|
||||
"react-scripts": "5.0.1",
|
||||
|
||||
42
src/Gallery/Gallery.css
Normal file
42
src/Gallery/Gallery.css
Normal 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;
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user