116 lines
5.7 KiB
TypeScript
116 lines
5.7 KiB
TypeScript
"use client";
|
||
|
||
import Image from "next/image";
|
||
import { useState } from "react";
|
||
|
||
const filters = ["Tümü", "Odalar", "Aktiviteler", "Restoran", "Doğa"] as const;
|
||
type Filter = (typeof filters)[number];
|
||
|
||
const gallery: { src: string; alt: string; category: Exclude<Filter, "Tümü"> }[] = [
|
||
{ src: "https://images.unsplash.com/photo-1582719478250-c89404bb8a0e?q=80&w=2940&auto=format&fit=crop", alt: "Standart Oda", category: "Odalar" },
|
||
{ src: "https://images.unsplash.com/photo-1533000756353-909d73d2a3c7?q=80&w=2940&auto=format&fit=crop", alt: "Kitesurf", category: "Aktiviteler" },
|
||
{ src: "https://images.unsplash.com/photo-1544551763-46a013bb70d5?q=80&w=2940&auto=format&fit=crop", alt: "Nehir Doğa", category: "Doğa" },
|
||
{ src: "https://images.unsplash.com/photo-1566665797739-1674de7a421a?q=80&w=2874&auto=format&fit=crop", alt: "Nehir Manzaralı Oda",category: "Odalar" },
|
||
{ src: "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?q=80&w=2940&auto=format&fit=crop", alt: "Restoran", category: "Restoran" },
|
||
{ src: "https://images.unsplash.com/photo-1599901860904-17e08627c271?q=80&w=2940&auto=format&fit=crop", alt: "Yoga", category: "Aktiviteler" },
|
||
{ src: "https://images.unsplash.com/photo-1499955085172-a104c9463ece?q=80&w=2940&auto=format&fit=crop", alt: "Bungalow", category: "Odalar" },
|
||
{ src: "https://images.unsplash.com/photo-1544606771-46abcf9dbb83?q=80&w=2924&auto=format&fit=crop", alt: "SUP", category: "Aktiviteler" },
|
||
{ src: "https://images.unsplash.com/photo-1551504734-5ee1c4a1479b?q=80&w=2940&auto=format&fit=crop", alt: "Kahvaltı", category: "Restoran" },
|
||
{ src: "https://images.unsplash.com/photo-1511994298241-608e28f14fde?q=80&w=2940&auto=format&fit=crop", alt: "Bisiklet", category: "Aktiviteler" },
|
||
{ src: "https://images.unsplash.com/photo-1544148103-0773bf10d330?q=80&w=2940&auto=format&fit=crop", alt: "Restoran Ambiyans", category: "Restoran" },
|
||
{ src: "https://images.unsplash.com/photo-1498623116890-37e912163d5d?q=80&w=2940&auto=format&fit=crop", alt: "Gün Batımı", category: "Doğa" },
|
||
];
|
||
|
||
export default function GaleriPage() {
|
||
const [active, setActive] = useState<Filter>("Tümü");
|
||
const [lightbox, setLightbox] = useState<string | null>(null);
|
||
|
||
const filtered =
|
||
active === "Tümü" ? gallery : gallery.filter((g) => g.category === active);
|
||
|
||
return (
|
||
<div className="min-h-screen bg-background pt-28 pb-20">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
|
||
{/* Heading */}
|
||
<div className="text-center mb-12">
|
||
<span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-4">
|
||
Fotoğraflar
|
||
</span>
|
||
<h1 className="font-serif text-5xl font-bold text-dark mb-4">Galeri</h1>
|
||
<p className="text-muted max-w-md mx-auto text-sm leading-relaxed">
|
||
Kite Beach Akyaka'nın eşsiz doğasını, modern odalarını ve heyecan verici aktivitelerini keşfedin.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Filter tabs */}
|
||
<div className="flex flex-wrap justify-center gap-2 mb-12">
|
||
{filters.map((f) => (
|
||
<button
|
||
key={f}
|
||
onClick={() => setActive(f)}
|
||
className={`px-6 py-2.5 rounded-full text-[12px] font-bold tracking-wider uppercase transition-all duration-300 ${
|
||
active === f
|
||
? "bg-primary text-white shadow-md shadow-primary/20"
|
||
: "bg-white text-dark border border-sand hover:border-primary/40 hover:text-primary"
|
||
}`}
|
||
>
|
||
{f}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{/* Grid */}
|
||
<div className="columns-1 sm:columns-2 md:columns-3 gap-4 space-y-4">
|
||
{filtered.map((img, idx) => (
|
||
<div
|
||
key={`${active}-${idx}`}
|
||
className="break-inside-avoid relative rounded-2xl overflow-hidden group cursor-pointer"
|
||
onClick={() => setLightbox(img.src)}
|
||
style={{ animation: `scale-in 0.4s cubic-bezier(0.16,1,0.3,1) ${idx * 40}ms both` }}
|
||
>
|
||
<div className="relative w-full" style={{ paddingBottom: idx % 3 === 0 ? "133%" : "75%" }}>
|
||
<Image
|
||
src={img.src}
|
||
alt={img.alt}
|
||
fill
|
||
className="object-cover group-hover:scale-105 transition-transform duration-700"
|
||
/>
|
||
<div className="absolute inset-0 bg-dark/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
|
||
<span className="text-white font-semibold text-[13px] tracking-wider bg-dark/60 backdrop-blur-sm px-4 py-2 rounded-full">
|
||
{img.alt}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
</div>
|
||
|
||
{/* Lightbox */}
|
||
{lightbox && (
|
||
<div
|
||
className="fixed inset-0 z-50 bg-dark/95 flex items-center justify-center p-4 cursor-zoom-out"
|
||
onClick={() => setLightbox(null)}
|
||
>
|
||
<div className="relative max-w-5xl w-full max-h-[90vh] aspect-video">
|
||
<Image
|
||
src={lightbox}
|
||
alt="Galeri"
|
||
fill
|
||
className="object-contain rounded-xl"
|
||
/>
|
||
</div>
|
||
<button
|
||
className="absolute top-6 right-6 text-white/60 hover:text-white transition-colors text-3xl font-light"
|
||
onClick={() => setLightbox(null)}
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|