154 lines
7.2 KiB
TypeScript
154 lines
7.2 KiB
TypeScript
"use client";
|
||
|
||
import Image from "next/image";
|
||
import { useState, use } from "react";
|
||
|
||
const getAltText = (alt: string, isEn: boolean) => {
|
||
if (!isEn) return alt;
|
||
const translations: Record<string, string> = {
|
||
"Standart Oda": "Standard Room",
|
||
"Kitesurf": "Kitesurfing",
|
||
"Nehir Doğa": "River Nature",
|
||
"Nehir Manzaralı Oda": "River View Room",
|
||
"Restoran": "Restaurant",
|
||
"Yoga": "Yoga",
|
||
"Bungalow": "Bungalow",
|
||
"SUP": "Stand Up Paddleboarding",
|
||
"Kahvaltı": "Breakfast Spread",
|
||
"Bisiklet": "Bicycle Rental",
|
||
"Restoran Ambiyans": "Restaurant Ambience",
|
||
"Gün Batımı": "Sunset View",
|
||
};
|
||
return translations[alt] || alt;
|
||
};
|
||
|
||
const gallery: { src: string; alt: string; category: "Odalar" | "Aktiviteler" | "Restoran" | "Doğa" }[] = [
|
||
{ src: "https://images.unsplash.com/photo-1618773928121-c32242e63f39?q=80&w=2940&auto=format&fit=crop", alt: "Standart Oda", category: "Odalar" },
|
||
{ src: "https://images.unsplash.com/photo-1526367790999-0150786686a2?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-1544367567-0f2fcb009e0b?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-1507525428034-b723cf961d3e?q=80&w=2940&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({ params }: { params: Promise<{ lang: string }> }) {
|
||
const { lang } = use(params);
|
||
const isEn = lang === "en";
|
||
|
||
const filters = isEn
|
||
? ["All", "Rooms", "Activities", "Restaurant", "Nature"]
|
||
: ["Tümü", "Odalar", "Aktiviteler", "Restoran", "Doğa"];
|
||
|
||
const [active, setActive] = useState<string>(isEn ? "All" : "Tümü");
|
||
const [lightbox, setLightbox] = useState<string | null>(null);
|
||
|
||
const getInternalCategory = (filterName: string) => {
|
||
if (filterName === "All" || filterName === "Tümü") return "Tümü";
|
||
if (filterName === "Rooms") return "Odalar";
|
||
if (filterName === "Activities") return "Aktiviteler";
|
||
if (filterName === "Restaurant") return "Restoran";
|
||
if (filterName === "Nature") return "Doğa";
|
||
return filterName;
|
||
};
|
||
|
||
const internalActive = getInternalCategory(active);
|
||
|
||
const filtered =
|
||
internalActive === "Tümü" ? gallery : gallery.filter((g) => g.category === internalActive);
|
||
|
||
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">
|
||
{isEn ? "Photos" : "Fotoğraflar"}
|
||
</span>
|
||
<h1 className="font-serif text-5xl font-bold text-dark mb-4">{isEn ? "Gallery" : "Galeri"}</h1>
|
||
<p className="text-muted max-w-md mx-auto text-sm leading-relaxed">
|
||
{isEn
|
||
? "Discover the unique nature, modern rooms, and exciting activities of Kite Beach Akyaka."
|
||
: "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={getAltText(img.alt, isEn)}
|
||
fill
|
||
sizes="(max-width: 640px) 100vw, (max-width: 768px) 50vw, 33vw"
|
||
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">
|
||
{getAltText(img.alt, isEn)}
|
||
</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
|
||
sizes="100vw"
|
||
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>
|
||
);
|
||
}
|