This commit is contained in:
Damien Ostler 2024-06-03 02:25:25 -04:00
parent e5daff376a
commit 6f5bf90a0b
2 changed files with 27 additions and 16 deletions

View File

@ -21,6 +21,9 @@ function PageComponent() {
const [fileNames, setFileNames] = useState<string[]>([]); const [fileNames, setFileNames] = useState<string[]>([]);
const [selectedTags, setSelectedTags] = useState<string[]>([]); const [selectedTags, setSelectedTags] = useState<string[]>([]);
const [open, setOpen] = useState<boolean>(false);
const [images, setImages] = useState<string[]>([]); const [images, setImages] = useState<string[]>([]);
const getData = async () => { const getData = async () => {
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
@ -127,7 +130,7 @@ function PageComponent() {
key={"galleryThumbnail"+galleryName+"-"+tags.join("")} key={"galleryThumbnail"+galleryName+"-"+tags.join("")}
id={originalName} id={originalName}
columns={3} columns={3}
onSelect={function (id: string, columns: number): void {}} onSelect={function (id: string, columns: number): void { setOpen(true) }}
title={galleryName} title={galleryName}
subscription={tier} subscription={tier}
tags={tags} tags={tags}
@ -210,21 +213,29 @@ function PageComponent() {
)} )}
</div> </div>
</div> </div>
<div className="w-full flex opacity-90 backdrop-blur-lg bg-primary shadow-lg p-8 pt-0 rounded"> {(open) && (
<>
<Masonry {/*
breakpointCols={3} This is the modal for holding the gallery
className="my-masonry-grid pl-6 " */}
> <div
{images.map((image, index) => ( className={`fixed inset-0 transition-opacity z-30 animate-in`}
<img aria-hidden="true"
key={index} >
src={image} <div
className={`animate-in animate-once animate-duration-1000 animate-ease-out animate-reverse hover:scale-105 p-2 cursor-pointer my-2 transition-all opacity-100 duration-500 ease-in-out transform`} className="absolute inset-0 bg-secondary-dark opacity-70 z-30"
/> onClick={() => setOpen(true)}
))} ></div>
</Masonry> <div className="absolute inset-0 overflow-y-auto overflow-x-hidden no-scrollbar pt-2 w-full p-20 z-30">
<Gallery
id={gallery.name}
columns={3}
closeMenu={() => setOpen(false)}
></Gallery>
</div> </div>
</div>
</>
)}
</div> </div>
</div> </div>
); );

View File

@ -114,7 +114,7 @@ const Gallery = ({ id, columns, closeMenu }: GalleryProps) => {
<div className='grid grid-cols-5 pl-4 gap-4 pr-4'> <div className='grid grid-cols-5 pl-4 gap-4 pr-4'>
<button <button
className={`justify-center text-center w-full animate-in animate-once animate-duration-1000 animate-ease-out animate-reverse mb-4 py-2 px-4 rounded-lg no-underline flex items-center z-50 bg-error hover:bg-error-light`} className={`justify-center text-center w-full animate-in animate-once animate-duration-1000 animate-ease-out animate-reverse mb-4 py-2 px-4 rounded-lg no-underline flex items-center z-50 bg-error hover:bg-error-light`}
onClick={() => back_page()} onClick={() => close()}
> >
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" /> <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />