damien/neroshitron
1
0
Fork 0
mirror of https://github.com/D4M13N-D3V/neroshitron.git synced 2025-03-14 10:05:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix:close button

Browse Source
This commit is contained in:
Damien Ostler 2024-05-26 14:36:20 -04:00
parent 138f34169e
commit 396bb68b14
2 changed files with 30 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app/gallery/page.tsx
View File

@ -35,6 +35,11 @@ function PageComponent() {
setIsOpen(true);
};
const closeGallery = () => {
setSelectedGallery(null);
setIsOpen(false);
}
const getData = async () => {
const galleriesResponse = await fetch('/api/galleries');
const galleriesData = await galleriesResponse.json();
@ -50,33 +55,19 @@ function PageComponent() {
return ( ( user ? (
<div className="w-full h-full flex justify-center">
<div className="flex-1 w-full h-full flex flex-col gap-20">
{isOpen ? (
<>
<div key={randomIds[0]} className="absolute w-full h-full overflow-hidden z-2 animate-flip-up animate-ease-out animate-reverse">
<img src="gallery_girl.png" className="float-right object-cover h-screen w-3/6" alt="Background" />
</div>
<div key={randomIds[1]} className="absolute items-center w-3/5 h-full ml-10 z-2 overflow-hidden animate-fade animate-ease-out animate-reverse">
<div className="grid grid-cols-3 gap-x-10 h-full overflow-y-auto no-scrollbar pt-36">
{galleries.map((gallery, index) => (
<GalleryThumbnail key={index} id={gallery.id} onSelect={() => selectGallery(gallery.id)}></GalleryThumbnail>
))}
</div>
</div>
</> ) : (
<>
<div key={randomIds[2]} className="absolute w-full h-full overflow-hidden z-2 animate-flip-up animate-ease-out">
<div className="absolute w-full h-full overflow-hidden z-2 animate-flip-up animate-ease-out">
<img src="gallery_girl.png" className="float-right object-cover h-screen w-3/6" alt="Background" />
</div>
<div key={randomIds[3]} className="absolute items-center w-3/5 h-full ml-10 z-2 overflow-hidden nimate-fade animate-ease-out">
<div className="grid grid-cols-3 gap-x-10 h-full overflow-y-auto no-scrollbar pt-36">
<div className="absolute items-center w-3/5 h-full ml-10 z-2 overflow-hidden nimate-fade animate-ease-out">
<div className="grid grid-cols-3 gap-y-36 gap-x-10 h-full overflow-y-auto no-scrollbar pt-36">
{galleries.map((gallery, index) => (
<GalleryThumbnail key={index} id={gallery.id} onSelect={selectGallery}></GalleryThumbnail>
))}
</div>
</div>
</>
)}
</div>
{(isOpen ? (
<>
@ -86,7 +77,7 @@ function PageComponent() {
<div className="absolute inset-0 bg-neroshi-blue-900 opacity-70" onClick={()=>setIsOpen(false)} >
</div>
<div className="absolute inset-0 overflow-y-auto overflow-x-hidden no-scrollbar pt-20 w-full p-20">
<Gallery id={selectedGallery as string} closeMenu={() => setIsOpen(false)}></Gallery>
<Gallery id={selectedGallery as string} closeMenu={() => closeGallery()}></Gallery>
</div>
</div>

53
components/ui/gallery.tsx
View File

@ -85,6 +85,15 @@ const Gallery = ({ id, closeMenu }: GalleryProps) => {
window.open(url, '_blank');
}
const close = () => {
if(selectedImage != null){
setSelectedImage(null);
}
else{
closeMenu();
}
}
const breakpointColumnsObj = {
default: 3
};
@ -92,7 +101,7 @@ const Gallery = ({ id, closeMenu }: GalleryProps) => {
<>
<button
className="fixed bg-purple-800 left-10 bottom-5 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"
onClick={()=> closeMenu()}
onClick={()=> close()}
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -112,36 +121,16 @@ const Gallery = ({ id, closeMenu }: GalleryProps) => {
</button>
<div className='z-10 pt-10' style={{ display: selectedImage ? 'flex' : 'block', alignItems: 'flex-start' }}>
{isSingle ? (
<div className='w-full h-full flex items-center'>
<>
{selectedImage &&
<img
src={selectedImage}
style={{ objectFit: 'contain' }}
className="cursor-pointer animate-in w-full h-auto"
onClick={() => setSelectedImage(null)}
/>
}
{renderButtons()}
</>
</div>
) : (
<>
<div className='w-full h-full flex items-center'>
<>
<div className='z-10 pt-10' style={{ display: selectedImage ? 'flex' : 'block', alignItems: 'flex-start' }}><>
{renderButtons()}
{selectedImage &&
<img
src={selectedImage}
style={{ objectFit: 'contain' }}
className="cursor-pointer animate-in w-full h-auto"
onClick={() => setSelectedImage(null)}
/>
}
</>
</div>
{selectedImage ? (
<img
src={selectedImage}
style={{ objectFit: 'contain' }}
className="cursor-pointer animate-in w-full h-auto"
onClick={() => setSelectedImage(null)}
/>
) : (
<Masonry
breakpointCols={selectedImage==null ? 4 : 2}
className="my-masonry-grid"
@ -149,15 +138,15 @@ const Gallery = ({ id, closeMenu }: GalleryProps) => {
>
{images.filter(img => img !== selectedImage).map((image, index) => (
<img
key={generateRandomString(3)}
src={image}
onClick={() => handleClick(image)}
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`}
/>
))}
</Masonry>
)
}
</>
)}
</div>
</>
);