50 lines
2.0 KiB
JavaScript
50 lines
2.0 KiB
JavaScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { notFound } from "next/navigation";
|
|
import { getLandingContent, isSupportedLocale, locales } from "@/lib/site-data";
|
|
|
|
export function generateStaticParams() {
|
|
return locales.map((locale) => ({ locale }));
|
|
}
|
|
|
|
export default async function BlogPage({ params }) {
|
|
const { locale } = await params;
|
|
|
|
if (!isSupportedLocale(locale)) {
|
|
notFound();
|
|
}
|
|
|
|
const { blogPosts, navigation, shared } = getLandingContent(locale);
|
|
|
|
return (
|
|
<main className="min-h-screen bg-brand-light text-gray-800">
|
|
<section className="mx-auto max-w-6xl px-6 py-16">
|
|
<Link href={`/${locale}`} className="text-sm font-semibold text-brand-purple">
|
|
{navigation.homeLabel}
|
|
</Link>
|
|
<h1 className="mt-4 text-4xl font-bold text-brand-dark">{navigation.blog}</h1>
|
|
<p className="mt-3 max-w-2xl text-gray-600">{shared.blogIntro}</p>
|
|
<div className="mt-12 grid gap-8 md:grid-cols-3">
|
|
{blogPosts.map((post) => (
|
|
<article key={post.slug} className="overflow-hidden rounded-2xl bg-white shadow-sm">
|
|
<div className="h-48 overflow-hidden">
|
|
<Image src={post.image} alt={post.title} width={800} height={600} className="h-full w-full object-cover transition duration-500 hover:scale-110" />
|
|
</div>
|
|
<div className="p-6">
|
|
<span className={`${post.tagClass} rounded px-2 py-1 text-xs font-bold`}>{post.tag}</span>
|
|
<h2 className="mt-4 text-xl font-bold">
|
|
<Link href={`/${locale}/blog/${post.slug}`} className="transition hover:text-brand-purple">
|
|
{post.title}
|
|
</Link>
|
|
</h2>
|
|
<p className="mt-3 text-sm text-gray-600">{post.excerpt}</p>
|
|
<div className="mt-4 text-sm text-gray-500">{post.date}</div>
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|