poyrazavsever/poyraz-portfolio
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement gallery page with lightbox functionality and image data management

Browse Source
This commit is contained in:
Poyraz Avsever
2026-04-13 12:14:37 +03:00
parent c147dc4eb4
commit 7982d0fb6b
15 changed files with 96 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/gallery/page.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { GalleryContent } from "@/components/gallery-content";
import { GALLERY_ITEMS } from "@/data/gallery";
import { GALLERY_IMAGES } from "@/data/gallery";
import type { Metadata } from "next";
export const metadata: Metadata = {
@@ -8,5 +8,5 @@ export const metadata: Metadata = {
};
export default function GalleryPage() {
return <GalleryContent items={GALLERY_ITEMS} />;
return <GalleryContent images={GALLERY_IMAGES} />;
}
components/gallery-content.tsx
+78 -126
View File
@@ -1,18 +1,16 @@
"use client";
import Image from "next/image";
import { useCallback, useEffect, useMemo, useState } from "react";
import { useCallback, useEffect, useState } from "react";
import { Icon } from "@iconify/react";
import { Badge, Typography } from "poyraz-ui/atoms";
import { Typography } from "poyraz-ui/atoms";
import { StaggerContainer, StaggerItem } from "@/components/motion-wrapper";
import type { GalleryItem } from "@/data/gallery";
type GalleryContentProps = {
items: GalleryItem[];
images: string[];
};
export function GalleryContent({ items }: GalleryContentProps) {
const [activeCategory, setActiveCategory] = useState<string>("All");
export function GalleryContent({ images }: GalleryContentProps) {
const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
// Keyboard navigation for lightbox
@@ -23,123 +21,93 @@ export function GalleryContent({ items }: GalleryContentProps) {
if (e.key === "Escape") {
setLightboxIndex(null);
} else if (e.key === "ArrowLeft") {
setLightboxIndex((prev) => (prev !== null && prev > 0 ? prev - 1 : prev));
setLightboxIndex((prev) =>
prev !== null && prev > 0 ? prev - 1 : prev,
);
} else if (e.key === "ArrowRight") {
setLightboxIndex((prev) =>
prev !== null && prev < items.length - 1 ? prev + 1 : prev,
prev !== null && prev < images.length - 1 ? prev + 1 : prev,
);
}
};
// Prevent body scroll when lightbox is open
document.body.style.overflow = "hidden";
window.addEventListener("keydown", handleKeyDown);
return () => window.removeEventListener("keydown", handleKeyDown);
}, [lightboxIndex, items.length]);
return () => {
document.body.style.overflow = "";
window.removeEventListener("keydown", handleKeyDown);
};
}, [lightboxIndex, images.length]);
const categories = useMemo(() => {
const cats = new Set(items.map((item) => item.category));
return ["All", ...Array.from(cats)].sort();
}, [items]);
const filteredItems = useMemo(() => {
if (activeCategory === "All") return items;
return items.filter((item) => item.category === activeCategory);
}, [items, activeCategory]);
const openLightbox = useCallback(
(item: GalleryItem) => {
const index = items.findIndex((i) => i.id === item.id);
if (index !== -1) {
setLightboxIndex(index);
}
},
[items],
);
const openLightbox = useCallback((index: number) => {
setLightboxIndex(index);
}, []);
const closeLightbox = useCallback(() => {
setLightboxIndex(null);
}, []);
const lightboxItem = lightboxIndex !== null ? items[lightboxIndex] : null;
if (images.length === 0) {
return (
<section className="flex h-full items-center justify-center">
<div className="rounded-xl border border-dashed border-border py-20 px-10 text-center">
<Typography variant="muted">
Henüz galeriye görsel eklenmemiş.
</Typography>
</div>
</section>
);
}
return (
<>
<section className="flex h-full flex-col gap-6 overflow-y-auto pb-10">
{categories.length > 1 && (
<div className="flex flex-wrap gap-2">
{categories.map((category) => (
<button
key={category}
onClick={() => setActiveCategory(category)}
type="button"
className="cursor-pointer transition-transform hover:scale-105 active:scale-95"
<StaggerContainer className="columns-1 gap-4 sm:columns-2 lg:columns-3 xl:columns-4">
{images.map((src, index) => (
<StaggerItem key={src} className="mb-4 break-inside-avoid">
<div
className="group relative cursor-zoom-in overflow-hidden rounded-xl border border-border bg-muted/20"
onClick={() => openLightbox(index)}
>
<Badge
variant={activeCategory === category ? "default" : "outline"}
className="rounded-full px-4 py-1.5 text-sm"
>
{category}
</Badge>
</button>
))}
</div>
)}
{filteredItems.length === 0 ? (
<div className="flex flex-1 items-center justify-center rounded-xl border border-dashed border-border py-20 text-center">
<Typography variant="muted">Henüz bu kategoride görsel bulunmuyor.</Typography>
</div>
) : (
<StaggerContainer className="columns-1 gap-4 sm:columns-2 lg:columns-3 xl:columns-4">
{filteredItems.map((item) => (
<StaggerItem key={item.id} className="mb-4 break-inside-avoid">
<div
className="group relative cursor-zoom-in overflow-hidden rounded-xl border border-border bg-muted/20"
onClick={() => openLightbox(item)}
>
<Image
src={item.image}
alt={item.title}
width={800}
height={600}
className="h-auto w-full object-cover transition-transform duration-500 ease-out group-hover:scale-105"
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, (max-width: 1280px) 33vw, 25vw"
/>
<div className="pointer-events-none absolute inset-0 bg-linear-to-t from-black/80 via-black/20 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
<div className="pointer-events-none absolute inset-x-0 bottom-0 flex translate-y-4 flex-col gap-1 p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
<Typography variant="small" className="font-semibold text-white">
{item.title}
</Typography>
<Typography variant="small" className="text-zinc-300 text-xs">
{item.category}
</Typography>
</div>
</div>
</StaggerItem>
))}
</StaggerContainer>
)}
<Image
src={src}
alt={`Gallery ${index + 1}`}
width={800}
height={600}
className="h-auto w-full object-cover transition-transform duration-500 ease-out group-hover:scale-105"
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, (max-width: 1280px) 33vw, 25vw"
/>
</div>
</StaggerItem>
))}
</StaggerContainer>
</section>
{/* Lightbox / Modal */}
{lightboxItem && (
<div className="fixed inset-0 z-100 flex items-center justify-center bg-black/95 backdrop-blur-sm animate-in fade-in duration-200">
{/* Lightbox */}
{lightboxIndex !== null && (
<div
className="fixed inset-0 z-100 flex items-center justify-center bg-white/95 backdrop-blur-sm animate-in fade-in duration-200"
onClick={closeLightbox}
>
{/* Close */}
<button
type="button"
className="absolute top-4 right-4 z-10 flex h-12 w-12 cursor-pointer items-center justify-center rounded-full bg-white/10 text-white transition-colors hover:bg-white/20"
className="absolute top-4 right-4 z-10 flex h-12 w-12 cursor-pointer items-center justify-center rounded-full bg-zinc-100 text-zinc-900 transition-colors hover:bg-zinc-200 shadow-sm border border-zinc-200"
onClick={closeLightbox}
aria-label="Kapat"
>
<Icon icon="mdi:close" width={24} height={24} />
</button>
{lightboxIndex! > 0 && (
{/* Previous */}
{lightboxIndex > 0 && (
<button
type="button"
className="absolute left-4 z-10 flex h-12 w-12 cursor-pointer items-center justify-center rounded-full bg-white/10 text-white transition-colors hover:bg-white/20"
className="absolute left-4 z-10 flex h-12 w-12 cursor-pointer items-center justify-center rounded-full bg-zinc-100 text-zinc-900 transition-colors hover:bg-zinc-200 shadow-sm border border-zinc-200"
onClick={(e) => {
e.stopPropagation();
setLightboxIndex(lightboxIndex! - 1);
setLightboxIndex(lightboxIndex - 1);
}}
aria-label="Önceki"
>
@@ -147,13 +115,14 @@ export function GalleryContent({ items }: GalleryContentProps) {
</button>
)}
{lightboxIndex! < items.length - 1 && (
{/* Next */}
{lightboxIndex < images.length - 1 && (
<button
type="button"
className="absolute right-4 z-10 flex h-12 w-12 cursor-pointer items-center justify-center rounded-full bg-white/10 text-white transition-colors hover:bg-white/20"
className="absolute right-4 z-10 flex h-12 w-12 cursor-pointer items-center justify-center rounded-full bg-zinc-100 text-zinc-900 transition-colors hover:bg-zinc-200 shadow-sm border border-zinc-200"
onClick={(e) => {
e.stopPropagation();
setLightboxIndex(lightboxIndex! + 1);
setLightboxIndex(lightboxIndex + 1);
}}
aria-label="Sonraki"
>
@@ -161,42 +130,25 @@ export function GalleryContent({ items }: GalleryContentProps) {
</button>
)}
{/* Image */}
<div
className="relative flex max-h-[90vh] max-w-[90vw] flex-col overflow-hidden rounded-lg animate-in zoom-in-95 duration-200"
className="relative flex max-h-[90vh] max-w-[90vw] overflow-hidden rounded-lg animate-in zoom-in-95 duration-200"
onClick={(e) => e.stopPropagation()}
>
<div className="relative flex-1 bg-zinc-950/50">
<Image
src={lightboxItem.image}
alt={lightboxItem.title}
width={1920}
height={1080}
className="h-full max-h-[80vh] w-auto object-contain"
sizes="100vw"
priority
/>
</div>
<Image
src={images[lightboxIndex]}
alt={`Gallery ${lightboxIndex + 1}`}
width={1920}
height={1080}
className="h-full max-h-[90vh] w-auto object-contain"
sizes="100vw"
priority
/>
</div>
<div className="bg-zinc-900 p-4 shrink-0">
<div className="flex items-center justify-between gap-4">
<div>
<Typography variant="large" className="text-white">
{lightboxItem.title}
</Typography>
<Typography variant="small" className="text-zinc-400">
{lightboxItem.category}
</Typography>
</div>
<div className="text-zinc-500 text-sm">
{lightboxIndex! + 1} / {items.length}
</div>
</div>
{lightboxItem.description && (
<Typography variant="small" className="mt-2 text-zinc-300">
{lightboxItem.description}
</Typography>
)}
</div>
{/* Counter */}
<div className="absolute bottom-4 left-1/2 -translate-x-1/2 rounded-full bg-zinc-100/90 px-4 py-1.5 text-sm text-zinc-900 shadow-sm border border-zinc-200 backdrop-blur-md">
{lightboxIndex + 1} / {images.length}
</div>
</div>
)}
data/gallery.ts
+15 -9
View File
@@ -1,9 +1,15 @@
export type GalleryItem = {
id: string;
title: string;
description: string;
image: string;
category: string;
};
export const GALLERY_ITEMS: GalleryItem[] = [];
// Galeri resimleri – public/gallery/ klasörüne eklenen dosyaların yolları
export const GALLERY_IMAGES: string[] = [
"/gallery/1.jpg",
"/gallery/2.jpg",
"/gallery/3.jpg",
"/gallery/4.jpg",
"/gallery/5.jpg",
"/gallery/6.jpg",
"/gallery/7.jpeg",
"/gallery/8.jpeg",
"/gallery/9.jpeg",
"/gallery/10.jpeg",
"/gallery/11.jpeg",
"/gallery/12.jpeg",
];
public/gallery/1.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 227 KiB

public/gallery/10.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 264 KiB

public/gallery/11.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 327 KiB

public/gallery/12.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 222 KiB

public/gallery/2.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 154 KiB

public/gallery/3.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 126 KiB

public/gallery/4.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 469 KiB

public/gallery/5.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 156 KiB

public/gallery/6.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 MiB

public/gallery/7.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 246 KiB

public/gallery/8.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 132 KiB

public/gallery/9.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 193 KiB