111 lines
4.8 KiB
TypeScript
111 lines
4.8 KiB
TypeScript
import { mockDb } from '@/lib/mockDb'
|
||
import { Link } from '@/i18n/routing'
|
||
import { getTranslations } from 'next-intl/server'
|
||
import { Calendar, Tag } from 'lucide-react'
|
||
|
||
export async function generateMetadata() {
|
||
return {
|
||
title: 'Marmaris Local Blog — Yerel Lezzet ve Gezi Rehberi',
|
||
description: 'Marmaris\'i bir yerel gibi keşfetmeniz için rehberler, nerede ne yenir tavsiyeleri ve gizli yerler.'
|
||
}
|
||
}
|
||
|
||
export default async function BlogIndexPage({ params }: { params: Promise<{ locale: string }> }) {
|
||
const { locale } = await params
|
||
const t = await getTranslations('nav')
|
||
const posts = await mockDb.getBlogPosts(true)
|
||
|
||
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">
|
||
küratörlü rehberler
|
||
</span>
|
||
<h1 className="text-4xl font-heading font-extrabold text-pine lowercase">
|
||
marmaris local <span className="text-turquoise">blog</span>
|
||
</h1>
|
||
<p className="max-w-xl mx-auto text-ink/70 text-xs sm:text-sm font-medium">
|
||
Turistlerin gözünden kaçan yerel detaylar, en iyi lezzet durakları ve gizli gezi noktaları.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Blog Posts Grid */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||
{posts.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 yayınlanmış bir yazı bulunmuyor.
|
||
</div>
|
||
) : (
|
||
posts.map((post) => {
|
||
const title = locale === 'en' ? post.titleEn : locale === 'ru' ? post.titleRu : post.titleTr
|
||
const content = locale === 'en' ? post.contentEn : locale === 'ru' ? post.contentRu : post.contentTr
|
||
const snippet = content.substring(0, 140) + '...'
|
||
|
||
return (
|
||
<article
|
||
key={post.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"
|
||
>
|
||
<div>
|
||
{/* Cover image */}
|
||
{post.coverImage && (
|
||
<div className="h-56 relative overflow-hidden bg-stone border-b border-pine/5">
|
||
<img
|
||
src={post.coverImage}
|
||
alt={title}
|
||
className="w-full h-full object-cover hover:scale-105 transition duration-500"
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{/* Post content preview */}
|
||
<div className="p-6 sm:p-8 space-y-4">
|
||
{/* Meta info */}
|
||
<div className="flex items-center gap-4 text-[10px] text-shutter font-mono">
|
||
<span className="flex items-center gap-1.5">
|
||
<Calendar className="w-3.5 h-3.5" />
|
||
{post.publishedAt ? new Date(post.publishedAt).toLocaleDateString(locale === 'tr' ? 'tr-TR' : locale === 'ru' ? 'ru-RU' : 'en-US') : ''}
|
||
</span>
|
||
|
||
{post.tags.length > 0 && (
|
||
<span className="flex items-center gap-1.5">
|
||
<Tag className="w-3.5 h-3.5" />
|
||
{post.tags[0]}
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
<h2 className="font-heading font-extrabold text-lg text-pine hover:text-turquoise transition duration-150 lowercase leading-snug">
|
||
<Link href={`/blog/${post.slug}`}>
|
||
{title}
|
||
</Link>
|
||
</h2>
|
||
|
||
<p className="text-ink/75 text-xs sm:text-sm leading-relaxed">
|
||
{snippet}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="px-6 sm:px-8 pb-6 sm:pb-8 pt-2">
|
||
<Link
|
||
href={`/blog/${post.slug}`}
|
||
className="inline-flex items-center text-xs font-mono font-bold text-turquoise hover:underline uppercase tracking-wider"
|
||
>
|
||
okumaya devam et →
|
||
</Link>
|
||
</div>
|
||
</article>
|
||
)
|
||
})
|
||
)}
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|