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:Gallery

Browse Source
This commit is contained in:
Damien Ostler 2024-05-26 16:36:45 -04:00
parent 396bb68b14
commit a3382a6434
4 changed files with 146 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/gallery/page.tsx
View File

@ -57,10 +57,10 @@ function PageComponent() {
<div className="flex-1 w-full h-full flex flex-col gap-20"> <div className="flex-1 w-full h-full flex flex-col gap-20">
<> <>
<div 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-0 animate-flip-up animate-ease-out">
<img src="gallery_girl.png" className="float-right object-cover h-screen w-3/6" alt="Background" /> <img src="gallery_girl.png" className="float-right object-cover h-screen w-3/6" alt="Background" />
</div> </div>
<div 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-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} onSelect={selectGallery}></GalleryThumbnail>
@ -73,10 +73,10 @@ function PageComponent() {
<> <>
<div className={`fixed inset-0 transition-opacity${isOpen ? 'animate-in' : 'fade-out'}`} aria-hidden="true"> <div className={`fixed inset-0 transition-opacity z-30 ${isOpen ? 'animate-in' : 'fade-out'}`} aria-hidden="true">
<div className="absolute inset-0 bg-neroshi-blue-900 opacity-70" 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-20 w-full p-20"> <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} closeMenu={() => closeGallery()}></Gallery>
</div> </div>

2
app/layout.tsx
View File

@ -21,7 +21,7 @@ export default function RootLayout({
return ( return (
<html lang="en" className={GeistSans.className}> <html lang="en" className={GeistSans.className}>
<body className="bg-background text-foreground"> <body className="bg-background text-foreground">
<div className="w-full absolute z-20"> <div className="w-full absolute z-10">
<NavigationBar/> <NavigationBar/>
</div> </div>
<main className="min-h-screen flex flex-col items-center bg-gradient-to-r from-neroshi-blue-900 to-neroshi-blue-950"> <main className="min-h-screen flex flex-col items-center bg-gradient-to-r from-neroshi-blue-900 to-neroshi-blue-950">

4
components/NavigationBar.tsx
View File

@ -28,9 +28,9 @@ export default async function AuthButton() {
const gravatarUrl = `https://www.gravatar.com/avatar/${emailHash}`; const gravatarUrl = `https://www.gravatar.com/avatar/${emailHash}`;
return( return(
<div className="flex justify-center items-center pt-2 "> <div className="flex justify-center items-center pt-2 ">
<nav className="w-1/3 bg-neroshi-blue-300 bg-opacity-10 flex justify-center h-16 animate-in rounded-3xl" style={{ backdropFilter: 'blur(10px)' }}> <nav className="w-1/3 bg-neroshi-blue-300 bg-opacity-10 flex justify-center z-10 h-16 animate-in rounded-3xl" style={{ backdropFilter: 'blur(10px)' }}>
<div className="w-full max-w-2xl flex justify-between items-center p-3 text-sm"> <div className="w-full max-w-2xl flex justify-between items-center p-3 text-sm">
<div className="flex items-center gap-2 "> <div className="flex items-center gap-2 z-10">
<Link <Link
href="/gallery" href="/gallery"
className="py-2 px-3 flex rounded-3xl no-underline bg-neroshi-blue-900 hover:bg-neroshi-blue-800" className="py-2 px-3 flex rounded-3xl no-underline bg-neroshi-blue-900 hover:bg-neroshi-blue-800"

115
components/ui/gallery.tsx
View File

@ -15,6 +15,14 @@ const Gallery = ({ id, closeMenu }: GalleryProps) => {
const [selectedImage, setSelectedImage] = useState<string | null>(null); const [selectedImage, setSelectedImage] = useState<string | null>(null);
const [images, setImages] = useState<string[]>([]); const [images, setImages] = useState<string[]>([]);
const [galleryId, setGalleryId] = useState(id as string); const [galleryId, setGalleryId] = useState(id as string);
const [currentIndex, setCurrentIndex] = useState(0);
const goToNext = () => {
setCurrentIndex(prevIndex => (prevIndex + 1) % images.length);
}
const goToPrevious = () => {
setCurrentIndex(prevIndex => (prevIndex - 1 + images.length) % images.length);
}
console.log(id) console.log(id)
const getData = async () => { const getData = async () => {
const thumbnailResponse = await fetch('/api/galleries/'+String(galleryId)+'/images'); const thumbnailResponse = await fetch('/api/galleries/'+String(galleryId)+'/images');
@ -31,25 +39,59 @@ const Gallery = ({ id, closeMenu }: GalleryProps) => {
return result; return result;
} }
const next = () => {
if (currentIndex < images.length - 1) {
setCurrentIndex(currentIndex + 1);
} else {
setCurrentIndex(0);
}
}
const previous = () => {
if (currentIndex > 0) {
setCurrentIndex(currentIndex - 1);
} else {
setCurrentIndex(images.length - 1);
}
}
const renderButtons = () => { const renderButtons = () => {
return ( return (
<> <>
<div className="z-10 fixed left-6 bottom-4 w-96 h-32 bg-purple-900 bg-opacity-10 flex justify-center h-16 animate-in rounded-3xl" style={{ backdropFilter: 'blur(10px)' }}>
</div> <div className="z-20 fixed left-6 bottom-4 w-100 h-20 bg-purple-900 bg-opacity-40 animate-in rounded-3xl" style={{ backdropFilter: 'blur(10px)' }}>
<div className='grid grid-cols-4 gap-4 pl-32 pr-4 pt-4 m-1 '>
<button <button
className={`fixed left-40 bottom-5 text-center w-56 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 ${!selectedImage ? 'opacity-50 cursor-not-allowed bg-gray-800' : 'bg-neroshi-blue-800'}`} 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 ${!selectedImage ? 'opacity-50 cursor-not-allowed bg-gray-800' : 'bg-pink-700 hover:bg-pink-600'}`}
onClick={() => previous()}
disabled={!selectedImage}
>
Previous
</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 ${!selectedImage ? 'opacity-50 cursor-not-allowed bg-gray-800' : 'bg-pink-700 hover:bg-pink-600'}`}
onClick={() => next()}
disabled={!selectedImage}
>
Next
</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 ${!selectedImage ? 'opacity-50 cursor-not-allowed bg-gray-800' : 'bg-purple-700 hover:bg-purple-600'}`}
onClick={() => selectedImage && handleDownload(selectedImage)} onClick={() => selectedImage && handleDownload(selectedImage)}
disabled={!selectedImage} disabled={!selectedImage}
> >
Download Current Image Download
</button> </button>
<button <button
className={`fixed left-40 bottom-16 w-56 text-center 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 ${!selectedImage ? 'opacity-50 cursor-not-allowed bg-gray-800' : 'bg-neroshi-blue-800'}`} 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 ${!selectedImage ? 'opacity-50 cursor-not-allowed bg-gray-800' : 'bg-purple-700 hover:bg-purple-600'}`}
onClick={() => selectedImage && open()} onClick={() => selectedImage && open()}
disabled={!selectedImage} disabled={!selectedImage}
> >
Open Image in New Tab Open
</button> </button>
</div>
</div>
</> </>
); );
}; };
@ -65,14 +107,34 @@ const Gallery = ({ id, closeMenu }: GalleryProps) => {
}; };
useEffect(() => { useEffect(() => {
getData(); getData();
if (images.length === 1) { const handleKeyDown = (event: KeyboardEvent) => {
setIsSingle(true); switch (event.key) {
setSelectedImage(images[0]); case 'ArrowLeft':
case 'a':
case 'A':
previous();
break;
case 'ArrowRight':
case 'd':
case 'D':
next();
break;
default:
break;
} }
}, [selectedImage]); };
window.addEventListener('keydown', handleKeyDown);
// Clean up the event listener when the component is unmounted
return () => {
window.removeEventListener('keydown', handleKeyDown);
};
}, [selectedImage, currentIndex]);
const handleClick = (image: string) => { const handleClick = (image: string) => {
setSelectedImage(image); setSelectedImage(image);
setCurrentIndex(images.indexOf(image));
}; };
const open = () => { const open = () => {
@ -98,10 +160,10 @@ const Gallery = ({ id, closeMenu }: GalleryProps) => {
default: 3 default: 3
}; };
return ( return (
<> <div className="z-20">
<button <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" className="fixed bg-purple-800 hover:bg-purple-700 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={()=> close()} onClick={() => close()}
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -120,23 +182,31 @@ const Gallery = ({ id, closeMenu }: GalleryProps) => {
Back Back
</button> </button>
<div
<div className='z-10 pt-10' style={{ display: selectedImage ? 'flex' : 'block', alignItems: 'flex-start' }}><> className="z-30 pb-10"
style={{
display: selectedImage ? "flex" : "block",
alignItems: "flex-start",
}}
>
<>
{renderButtons()} {renderButtons()}
{selectedImage ? ( {selectedImage ? (
<img <img
src={selectedImage} src={images[currentIndex]}
style={{ objectFit: 'contain' }} style={{ objectFit: "contain", maxWidth: "100%", maxHeight: "calc(100vh - 20px)" }}
className="cursor-pointer animate-in w-full h-auto" className="cursor-pointer animate-in w-full h-auto"
onClick={() => setSelectedImage(null)} onClick={() => setSelectedImage(null)}
/> />
) : ( ) : (
<Masonry <Masonry
breakpointCols={selectedImage==null ? 4 : 2} breakpointCols={selectedImage == null ? 4 : 2}
className="my-masonry-grid" className="my-masonry-grid"
style={{ width: selectedImage ? '50%' : '100%' }} style={{ width: selectedImage ? "50%" : "100%" }}
> >
{images.filter(img => img !== selectedImage).map((image, index) => ( {images
.filter((img) => img !== selectedImage)
.map((image, index) => (
<img <img
src={image} src={image}
onClick={() => handleClick(image)} onClick={() => handleClick(image)}
@ -144,11 +214,10 @@ const Gallery = ({ id, closeMenu }: GalleryProps) => {
/> />
))} ))}
</Masonry> </Masonry>
) )}
}
</> </>
</div> </div>
</> </div>
); );
} }