49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
import { notFound } from 'next/navigation';
|
|
import { MDXRemote } from 'next-mdx-remote/rsc';
|
|
import { getPostBySlug } from '@/lib/blog';
|
|
|
|
interface BlogPostProps {
|
|
params: {
|
|
locale: string;
|
|
slug: string;
|
|
};
|
|
}
|
|
|
|
export default async function BlogPost({ params: { locale, slug } }: BlogPostProps) {
|
|
const post = await getPostBySlug(slug, locale);
|
|
|
|
if (!post) {
|
|
notFound();
|
|
}
|
|
|
|
return (
|
|
<article className="container mx-auto px-4 py-12 max-w-4xl">
|
|
<header className="mb-8 text-center">
|
|
<div className="text-text-secondary mb-4">
|
|
{new Date(post.frontmatter.date).toLocaleDateString(locale, {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
})}
|
|
</div>
|
|
<h1 className="text-4xl md:text-5xl font-bold text-primary mb-6">
|
|
{post.frontmatter.title}
|
|
</h1>
|
|
{post.frontmatter.featuredImage && (
|
|
<div className="aspect-video relative rounded-xl overflow-hidden shadow-lg mb-8">
|
|
<img
|
|
src={post.frontmatter.featuredImage}
|
|
alt={post.frontmatter.title}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
)}
|
|
</header>
|
|
|
|
<div className="prose prose-lg max-w-none">
|
|
<MDXRemote source={post.content} />
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|