103 lines
3.7 KiB
TypeScript
103 lines
3.7 KiB
TypeScript
import { mockDb } from '@/lib/mockDb'
|
|
import { Link } from '@/i18n/routing'
|
|
import { notFound } from 'next/navigation'
|
|
import { ArrowLeft, Layers } from 'lucide-react'
|
|
import ListingCard from '@/components/ListingCard'
|
|
import type { Metadata } from 'next'
|
|
|
|
interface Props {
|
|
params: Promise<{ locale: string; slug: string }>
|
|
}
|
|
|
|
export async function generateMetadata({ params }: Props): Promise<Metadata> {
|
|
const { locale, slug } = await params
|
|
const col = await mockDb.getCollectionBySlug(slug)
|
|
if (!col) return {}
|
|
|
|
const title = locale === 'en' ? col.titleEn : locale === 'ru' ? col.titleRu : col.titleTr
|
|
const description = locale === 'en' ? col.descriptionEn : locale === 'ru' ? col.descriptionRu : col.descriptionTr
|
|
const fullTitle = `${title} — Marmaris Local`
|
|
|
|
return {
|
|
title: fullTitle,
|
|
description,
|
|
openGraph: {
|
|
title: fullTitle,
|
|
description,
|
|
type: 'website',
|
|
...(col.coverImage ? { images: [{ url: col.coverImage }] } : {}),
|
|
},
|
|
}
|
|
}
|
|
|
|
export default async function CollectionDetailPage({ params }: Props) {
|
|
const { locale, slug } = await params
|
|
const col = await mockDb.getCollectionBySlug(slug)
|
|
|
|
if (!col) {
|
|
notFound()
|
|
}
|
|
|
|
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 listings = col.listings || []
|
|
|
|
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-8">
|
|
|
|
{/* Back Link */}
|
|
<Link
|
|
href="/collections"
|
|
className="inline-flex items-center gap-1.5 px-4 py-2 border border-pine/10 rounded-xl text-xs font-mono font-bold text-pine hover:bg-paper transition"
|
|
>
|
|
<ArrowLeft className="w-3.5 h-3.5" />
|
|
GERİ DÖN
|
|
</Link>
|
|
|
|
{/* Collection details banner */}
|
|
<div className="bg-paper border border-pine/8 rounded-3xl overflow-hidden shadow-sm flex flex-col md:flex-row gap-6 md:gap-8 p-6 sm:p-8">
|
|
{col.coverImage && (
|
|
<div className="w-full md:w-80 h-56 relative rounded-2xl overflow-hidden bg-stone shrink-0 border border-pine/5">
|
|
<img src={col.coverImage} alt={title} className="w-full h-full object-cover" />
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex flex-col justify-center space-y-3">
|
|
<span className="text-[9px] font-mono tracking-widest text-turquoise uppercase font-bold flex items-center gap-1.5">
|
|
<Layers className="w-3.5 h-3.5" />
|
|
Editör Seçkisi
|
|
</span>
|
|
<h1 className="text-2xl sm:text-3xl font-heading font-extrabold text-pine lowercase leading-tight">
|
|
{title}
|
|
</h1>
|
|
<p className="text-ink/75 text-xs sm:text-sm leading-relaxed max-w-2xl font-medium">
|
|
{desc}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Listings Grid */}
|
|
<div className="space-y-6">
|
|
<h2 className="text-lg font-heading font-extrabold text-pine lowercase border-b border-dashed border-pine/8 pb-3">
|
|
seçkide yer alan yerler ({listings.length})
|
|
</h2>
|
|
|
|
{listings.length === 0 ? (
|
|
<div className="bg-paper border border-pine/8 p-12 text-center text-shutter text-sm rounded-3xl">
|
|
Bu seçkiye henüz mekan eklenmemiş.
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{listings.map((listing) => (
|
|
<ListingCard key={listing.id} listing={listing} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|