114 lines
5.0 KiB
TypeScript
114 lines
5.0 KiB
TypeScript
import { mockDb } from '@/lib/mockDb'
|
||
import { Link } from '@/i18n/routing'
|
||
import { getTranslations } from 'next-intl/server'
|
||
import { Layers } from 'lucide-react'
|
||
import type { Metadata } from 'next'
|
||
import { basicMetadata } from '@/lib/seo'
|
||
|
||
export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }): Promise<Metadata> {
|
||
const { locale } = await params
|
||
|
||
const title =
|
||
locale === 'en'
|
||
? 'Curated Collections — Marmaris Local'
|
||
: locale === 'ru'
|
||
? 'Подборки редакции — Marmaris Local'
|
||
: 'Marmaris Local Seçkileri — Editör Kürasyonları'
|
||
|
||
const description =
|
||
locale === 'en'
|
||
? 'Themed, locally-approved collections of the best restaurants, apart hotels and services in Marmaris.'
|
||
: locale === 'ru'
|
||
? 'Тематические подборки лучших ресторанов, апарт-отелей и услуг Мармариса, проверенные местными.'
|
||
: "Marmaris'teki en iyi restoranlar, apartlar ve hizmetlerin özel tematik derlemeleri."
|
||
|
||
return basicMetadata(title, description)
|
||
}
|
||
|
||
export default async function CollectionsIndexPage({ params }: { params: Promise<{ locale: string }> }) {
|
||
const { locale } = await params
|
||
const t = await getTranslations('nav')
|
||
const collections = await mockDb.getCollections()
|
||
|
||
return (
|
||
<div className="bg-stone min-h-screen py-10 px-4 sm:px-6 lg:px-8 font-sans">
|
||
<div className="max-w-5xl mx-auto space-y-10">
|
||
|
||
{/* Title */}
|
||
<div className="text-center space-y-3">
|
||
<span className="text-[10px] font-mono tracking-widest text-shutter uppercase bg-paper px-3 py-1.5 rounded-full border border-pine/5">
|
||
özel tematik listeler
|
||
</span>
|
||
<h1 className="text-4xl font-heading font-extrabold text-pine lowercase">
|
||
yerel onaylı <span className="text-turquoise">seçkiler</span>
|
||
</h1>
|
||
<p className="max-w-xl mx-auto text-ink/70 text-xs sm:text-sm font-medium">
|
||
Editörlerimizin deneyimlerine göre özenle hazırladığı, güncel kategorize edilmiş mekan listeleri.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Collections Grid */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||
{collections.length === 0 ? (
|
||
<div className="col-span-2 bg-paper border border-pine/8 p-12 text-center text-shutter text-sm rounded-3xl">
|
||
Henüz eklenmiş bir seçki bulunmuyor.
|
||
</div>
|
||
) : (
|
||
collections.map((col) => {
|
||
const title = locale === 'en' ? col.titleEn : locale === 'ru' ? col.titleRu : col.titleTr
|
||
const desc = locale === 'en' ? col.descriptionEn : locale === 'ru' ? col.descriptionRu : col.descriptionTr
|
||
const listingCount = col.listings?.length || 0
|
||
|
||
return (
|
||
<div
|
||
key={col.id}
|
||
className="bg-paper border border-pine/8 rounded-3xl overflow-hidden shadow-sm flex flex-col justify-between hover:border-turquoise/35 transition-all duration-300 hover:shadow-md group"
|
||
>
|
||
<div>
|
||
{/* Cover image */}
|
||
{col.coverImage && (
|
||
<div className="h-56 relative overflow-hidden bg-stone border-b border-pine/5">
|
||
<img
|
||
src={col.coverImage}
|
||
alt={title}
|
||
className="w-full h-full object-cover group-hover:scale-103 transition duration-500"
|
||
/>
|
||
{/* Count tag */}
|
||
<span className="absolute top-4 right-4 bg-pine text-stone font-mono text-[9px] font-bold px-2.5 py-1 rounded-full uppercase tracking-wider">
|
||
{listingCount} Mekan
|
||
</span>
|
||
</div>
|
||
)}
|
||
|
||
<div className="p-6 sm:p-8 space-y-3">
|
||
<h2 className="font-heading font-extrabold text-lg text-pine group-hover:text-turquoise transition duration-150 lowercase leading-snug">
|
||
<Link href={`/collection/${col.slug}`}>
|
||
{title}
|
||
</Link>
|
||
</h2>
|
||
|
||
<p className="text-ink/75 text-xs sm:text-sm leading-relaxed line-clamp-3">
|
||
{desc}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="px-6 sm:px-8 pb-6 sm:pb-8 pt-2">
|
||
<Link
|
||
href={`/collection/${col.slug}`}
|
||
className="inline-flex items-center gap-1.5 text-xs font-mono font-bold text-turquoise hover:underline uppercase tracking-wider"
|
||
>
|
||
listeyi incele →
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
)
|
||
})
|
||
)}
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|