ayrisdev/kitebeachakyaka
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bot

Browse Source
This commit is contained in:
AyrisAI
2026-07-11 16:15:26 +03:00
parent ccb923e57a
commit ac78e5bf40
16 changed files with 504 additions and 322 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/[lang]/galeri/page.tsx
+52 -14
View File
@@ -1,32 +1,66 @@
"use client";
import Image from "next/image";
import { useState } from "react";
import { useState, use } from "react";
const filters = ["Tümü", "Odalar", "Aktiviteler", "Restoran", "Doğa"] as const;
type Filter = (typeof filters)[number];
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: 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" },
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-1522883392419-7d8cb2435728?q=80&w=2924&auto=format&fit=crop", alt: "SUP", category: "Aktiviteler" },
{ 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() {
const [active, setActive] = useState<Filter>("Tümü");
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 =
active === "Tümü" ? gallery : gallery.filter((g) => g.category === active);
internalActive === "Tümü" ? gallery : gallery.filter((g) => g.category === internalActive);
return (
<div className="min-h-screen bg-background pt-28 pb-20">
@@ -35,11 +69,13 @@ export default function GaleriPage() {
{/* 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
{isEn ? "Photos" : "Fotoğraflar"}
</span>
<h1 className="font-serif text-5xl font-bold text-dark mb-4">Galeri</h1>
<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">
Kite Beach Akyaka'nın eşsiz doğasını, modern odalarını ve heyecan verici aktivitelerini keşfedin.
{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>
@@ -72,13 +108,14 @@ export default function GaleriPage() {
<div className="relative w-full" style={{ paddingBottom: idx % 3 === 0 ? "133%" : "75%" }}>
<Image
src={img.src}
alt={img.alt}
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">
{img.alt}
{getAltText(img.alt, isEn)}
</span>
</div>
</div>
@@ -99,6 +136,7 @@ export default function GaleriPage() {
src={lightbox}
alt="Galeri"
fill
sizes="100vw"
className="object-contain rounded-xl"
/>
</div>