fix:close button

app/gallery/page.tsx

@@ -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="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="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>

components/ui/gallery.tsx

@@ -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'  }}>
+        <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'>
-                <>
             {renderButtons()}
-        {selectedImage && 
+            {selectedImage ? ( 
-            <img
+                <img
-                src={selectedImage}
+                    src={selectedImage}
-                style={{ objectFit: 'contain' }}
+                    style={{ objectFit: 'contain' }}
-                className="cursor-pointer animate-in w-full h-auto"
+                    className="cursor-pointer animate-in w-full h-auto"
-                onClick={() => setSelectedImage(null)}
+                    onClick={() => setSelectedImage(null)}
-            />
+                />
-        }
+            ) : (
-    </>
-     </div>   
                 <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>
         </>
     );