fix:added ability to configure rows

app/gallery/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 import { createClient } from "@/utils/supabase/client";
 import { redirect } from "next/navigation";
-import { Vortex } from "@/components/ui/vortex";
 import GalleryThumbnail from "@/components/ui/gallery_thumbnail";
 
 
@@ -19,6 +18,7 @@ function PageComponent() {
   const [user, setUser] = useState<User | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
   const [selectedGallery, setSelectedGallery] = useState<string | null>(null);
+  const [galleryColumns, setColumns] = useState<number>(0);
   const generateRandomString = function (length:number) {
     let result           = '';
     let characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
@@ -29,14 +29,16 @@ function PageComponent() {
     return result;
 }
 
-  const selectGallery = (gallery:string) => {
+  const selectGallery = (gallery:string, columns:number) => {
     setRandomIds([generateRandomString(3), generateRandomString(3), generateRandomString(3), generateRandomString(3)]);
     setSelectedGallery(gallery);
+    setColumns(columns);
     setIsOpen(true);
   };
 
   const closeGallery = () => {
     setSelectedGallery(null);
+    setColumns(0);
     setIsOpen(false);
   }
 
@@ -63,7 +65,8 @@ function PageComponent() {
           <div  className="absolute items-center w-3/5 h-full ml-10 z-0 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>
+                
+                <GalleryThumbnail key={index} id={gallery.id} columns={gallery.columns} onSelect={selectGallery}></GalleryThumbnail>
               ))}
             </div>
           </div> 
@@ -77,7 +80,7 @@ function PageComponent() {
         <div className="absolute inset-0 bg-neroshi-blue-900 opacity-70 z-30" onClick={()=>setIsOpen(false)} >
         </div>
         <div className="absolute inset-0 overflow-y-auto overflow-x-hidden no-scrollbar pt-2 w-full p-20 z-30">
-          <Gallery id={selectedGallery as string} closeMenu={() => closeGallery()}></Gallery>
+          <Gallery id={selectedGallery as string} columns={galleryColumns} closeMenu={() => closeGallery()}></Gallery>
         </div>
 
         </div>

components/ui/gallery.tsx

@@ -5,10 +5,11 @@ import Masonry from 'react-masonry-css';
 
 interface GalleryProps {
     id: string;
+    columns: number;
     closeMenu: () => void;
 }
 
-const Gallery = ({ id, closeMenu }: GalleryProps) => {
+const Gallery = ({ id, columns, closeMenu }: GalleryProps) => {
 
     const [isSingle, setIsSingle] = useState<boolean>(false);
     const [loaded, setLoaded] = useState({})
@@ -190,7 +191,7 @@ const Gallery = ({ id, closeMenu }: GalleryProps) => {
                         />
                     ) : (
                         <Masonry
-                            breakpointCols={selectedImage == null ? 4 : 2}
+                            breakpointCols={columns}
                             className="my-masonry-grid"
                             style={{ width: selectedImage ? "50%" : "100%" }}
                         >

components/ui/gallery_thumbnail.tsx

@@ -2,16 +2,17 @@ import { useState, useEffect } from 'react';
 
 interface GalleryThumbnailProps {
     id: string;
-    onSelect: (id:string) => void;
+    columns: number;
+    onSelect: (id:string, columns:number) => void;
 }
 
-const GalleryThumbnail = ({ id, onSelect }: GalleryThumbnailProps) => {
+const GalleryThumbnail = ({ id, columns, onSelect }: GalleryThumbnailProps) => {
     const [galleryId, setGalleryId] = useState<string>(id);
     const [thumbnailUrl, setThumbnailUrl] = useState<string>('');
     const [isLoading, setIsLoading] = useState<boolean>(true);
-
+    const [galleryCollumns, setColumns] = useState<number>(columns);
     const openGallery = () => {
-        onSelect(galleryId);
+        onSelect(galleryId, galleryCollumns);
     };
 
     const getData = async () => {