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

app/gallery/page.tsx

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

@@ -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) {
+export function GalleryContent({ images }: GalleryContentProps) {
-  const [activeCategory, setActiveCategory] = useState<string>("All");
   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);
+    return () => {
-  }, [lightboxIndex, items.length]);
+      document.body.style.overflow = "";
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [lightboxIndex, images.length]);
 
-  const categories = useMemo(() => {
+  const openLightbox = useCallback((index: number) => {
-    const cats = new Set(items.map((item) => item.category));
+    setLightboxIndex(index);
-    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 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">
-
+        <StaggerContainer className="columns-1 gap-4 sm:columns-2 lg:columns-3 xl:columns-4">
-        {categories.length > 1 && (
+          {images.map((src, index) => (
-          <div className="flex flex-wrap gap-2">
+            <StaggerItem key={src} className="mb-4 break-inside-avoid">
-            {categories.map((category) => (
+              <div
-              <button
+                className="group relative cursor-zoom-in overflow-hidden rounded-xl border border-border bg-muted/20"
-                key={category}
+                onClick={() => openLightbox(index)}
-                onClick={() => setActiveCategory(category)}
-                type="button"
-                className="cursor-pointer transition-transform hover:scale-105 active:scale-95"
               >
-                <Badge
+                <Image
-                  variant={activeCategory === category ? "default" : "outline"}
+                  src={src}
-                  className="rounded-full px-4 py-1.5 text-sm"
+                  alt={`Gallery ${index + 1}`}
-                >
+                  width={800}
-                  {category}
+                  height={600}
-                </Badge>
+                  className="h-auto w-full object-cover transition-transform duration-500 ease-out group-hover:scale-105"
-              </button>
+                  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, (max-width: 1280px) 33vw, 25vw"
-            ))}
+                />
-          </div>
+              </div>
-        )}
+            </StaggerItem>
-
+          ))}
-        {filteredItems.length === 0 ? (
+        </StaggerContainer>
-          <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>
-        )}
       </section>
 
-      {/* Lightbox / Modal */}
+      {/* Lightbox */}
-      {lightboxItem && (
+      {lightboxIndex !== null && (
-        <div className="fixed inset-0 z-100 flex items-center justify-center bg-black/95 backdrop-blur-sm animate-in fade-in duration-200">
+        <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
-              <Image
+              src={images[lightboxIndex]}
-                src={lightboxItem.image}
+              alt={`Gallery ${lightboxIndex + 1}`}
-                alt={lightboxItem.title}
+              width={1920}
-                width={1920}
+              height={1080}
-                height={1080}
+              className="h-full max-h-[90vh] w-auto object-contain"
-                className="h-full max-h-[80vh] w-auto object-contain"
+              sizes="100vw"
-                sizes="100vw"
+              priority
-                priority
+            />
-              />
+          </div>
-            </div>
+
-            
+          {/* Counter */}
-            <div className="bg-zinc-900 p-4 shrink-0">
+          <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">
-              <div className="flex items-center justify-between gap-4">
+            {lightboxIndex + 1} / {images.length}
-                <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>
           </div>
         </div>
       )}

data/gallery.ts

@@ -1,9 +1,15 @@
-export type GalleryItem = {
+// Galeri resimleri – public/gallery/ klasörüne eklenen dosyaların yolları
-  id: string;
+export const GALLERY_IMAGES: string[] = [
-  title: string;
+  "/gallery/1.jpg",
-  description: string;
+  "/gallery/2.jpg",
-  image: string;
+  "/gallery/3.jpg",
-  category: string;
+  "/gallery/4.jpg",
-};
+  "/gallery/5.jpg",
-
+  "/gallery/6.jpg",
-export const GALLERY_ITEMS: GalleryItem[] = [];
+  "/gallery/7.jpeg",
+  "/gallery/8.jpeg",
+  "/gallery/9.jpeg",
+  "/gallery/10.jpeg",
+  "/gallery/11.jpeg",
+  "/gallery/12.jpeg",
+];