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:added ability to configure rows

Browse Source
This commit is contained in:
Damien Ostler 2024-05-26 16:58:48 -04:00
parent 3291d70361
commit 1286003442
3 changed files with 15 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/gallery/page.tsx
View File

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

5
components/ui/gallery.tsx
View File

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

9
components/ui/gallery_thumbnail.tsx
View File

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