52 lines
2.0 KiB
TypeScript
52 lines
2.0 KiB
TypeScript
import Link from 'next/link';
|
|
import { getAllPosts } from '@/lib/blog';
|
|
import { useTranslations } from 'next-intl';
|
|
|
|
interface BlogIndexProps {
|
|
params: {
|
|
locale: string;
|
|
};
|
|
}
|
|
|
|
export default async function BlogIndex({ params: { locale } }: BlogIndexProps) {
|
|
const posts = await getAllPosts(locale);
|
|
|
|
return (
|
|
<div className="container mx-auto px-4 py-12">
|
|
<h1 className="text-4xl font-bold text-primary mb-8">Blog</h1>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{posts.map((post) => (
|
|
<Link key={post.slug} href={`/${locale}/blog/${post.slug}`} className="group">
|
|
<article className="bg-white rounded-lg shadow-sm overflow-hidden border border-neutral-dark h-full flex flex-col transition-transform hover:-translate-y-1">
|
|
{post.frontmatter.featuredImage && (
|
|
<div className="aspect-video relative overflow-hidden">
|
|
<img
|
|
src={post.frontmatter.featuredImage}
|
|
alt={post.frontmatter.title}
|
|
className="w-full h-full object-cover transition-transform group-hover:scale-105"
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className="p-6 flex flex-col flex-grow">
|
|
<div className="text-sm text-text-secondary mb-2">
|
|
{new Date(post.frontmatter.date).toLocaleDateString(locale)}
|
|
</div>
|
|
<h2 className="text-xl font-bold text-text-primary mb-3 group-hover:text-primary transition-colors">
|
|
{post.frontmatter.title}
|
|
</h2>
|
|
<p className="text-text-secondary line-clamp-3 mb-4 flex-grow">
|
|
{post.frontmatter.excerpt}
|
|
</p>
|
|
<span className="text-primary font-medium group-hover:underline">
|
|
Read more →
|
|
</span>
|
|
</div>
|
|
</article>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|