64 lines
2.6 KiB
TypeScript
64 lines
2.6 KiB
TypeScript
import React from 'react';
|
|
import Link from 'next/link';
|
|
import { getAllPosts } from '@/lib/blog';
|
|
import { getTranslations } from 'next-intl/server';
|
|
import { Section, Container } from '../../components/ui';
|
|
|
|
interface RecentPostsProps {
|
|
locale: string;
|
|
}
|
|
|
|
export default async function RecentPosts({ locale }: RecentPostsProps) {
|
|
const t = await getTranslations('Footer'); // Reusing recentPosts title from Footer or Index
|
|
const posts = await getAllPosts(locale);
|
|
const recentPosts = posts.slice(0, 3);
|
|
|
|
if (recentPosts.length === 0) return null;
|
|
|
|
return (
|
|
<Section className="bg-neutral-light py-24">
|
|
<Container>
|
|
<div className="flex items-center justify-between mb-12">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-text-primary">
|
|
{locale === 'de' ? 'Aktuelle Blogbeiträge' : 'Recent Blog Posts'}
|
|
</h2>
|
|
<Link href={`/${locale}/blog`} className="text-primary font-bold hover:underline">
|
|
{locale === 'de' ? 'Alle Beiträge ansehen' : 'View all posts'} →
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{recentPosts.map((post) => (
|
|
<Link key={post.slug} href={`/${locale}/blog/${post.slug}`} className="group block bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all border border-neutral">
|
|
{post.frontmatter.featuredImage && (
|
|
<div className="relative h-48 overflow-hidden">
|
|
<img
|
|
src={post.frontmatter.featuredImage}
|
|
alt={post.frontmatter.title}
|
|
className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className="p-6">
|
|
<div className="text-xs text-text-secondary mb-2">
|
|
{new Date(post.frontmatter.date).toLocaleDateString(locale, {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
})}
|
|
</div>
|
|
<h3 className="text-xl font-bold text-text-primary group-hover:text-primary transition-colors line-clamp-2 mb-4">
|
|
{post.frontmatter.title}
|
|
</h3>
|
|
<span className="text-primary text-sm font-bold inline-flex items-center">
|
|
{locale === 'de' ? 'Weiterlesen' : 'Read more'} →
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</Section>
|
|
);
|
|
}
|