102 lines
4.4 KiB
TypeScript
102 lines
4.4 KiB
TypeScript
import React from 'react';
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
import { getAllPosts } from '@/lib/blog';
|
|
import { getTranslations } from 'next-intl/server';
|
|
import { Section, Container, Heading, Card, Badge } from '../../components/ui';
|
|
|
|
interface RecentPostsProps {
|
|
locale: string;
|
|
}
|
|
|
|
export default async function RecentPosts({ locale }: RecentPostsProps) {
|
|
const t = await getTranslations('Blog');
|
|
const posts = await getAllPosts(locale);
|
|
const recentPosts = posts.slice(0, 3);
|
|
|
|
if (recentPosts.length === 0) return null;
|
|
|
|
return (
|
|
<Section className="bg-neutral py-16 md:py-24">
|
|
<Container>
|
|
<div className="flex flex-col md:flex-row items-start md:items-end justify-between mb-12 md:mb-16 gap-6">
|
|
<Heading level={2} subtitle={t('latestNews')} className="mb-0 text-primary">
|
|
{t('allArticles')}
|
|
</Heading>
|
|
<Link
|
|
href={`/${locale}/blog`}
|
|
className="group flex items-center text-primary font-bold text-base md:text-lg touch-target"
|
|
>
|
|
{t('allArticles')}
|
|
<span className="ml-2 transition-transform group-hover:translate-x-2">→</span>
|
|
</Link>
|
|
</div>
|
|
|
|
<ul className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-10 list-none p-0 m-0">
|
|
{recentPosts.map((post) => (
|
|
<li key={post.slug}>
|
|
<Link href={`/${locale}/blog/${post.slug}`} className="group block h-full">
|
|
<Card
|
|
tag="article"
|
|
className="h-full flex flex-col border-none shadow-lg hover:shadow-2xl transition-all duration-500 rounded-3xl"
|
|
>
|
|
{post.frontmatter.featuredImage && (
|
|
<div className="relative h-64 overflow-hidden">
|
|
<Image
|
|
src={`${post.frontmatter.featuredImage}?ar=16:9`}
|
|
alt={post.frontmatter.title}
|
|
fill
|
|
className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
|
|
sizes="(max-width: 768px) 100vw, 33vw"
|
|
loading="lazy"
|
|
/>
|
|
<div className="absolute inset-0 image-overlay-gradient opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
|
|
{post.frontmatter.category && (
|
|
<Badge variant="accent" className="absolute top-4 left-4 shadow-md">
|
|
{post.frontmatter.category}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
)}
|
|
<div className="p-6 md:p-8 flex flex-col flex-grow">
|
|
<div className="text-xs md:text-sm font-medium text-text-light mb-3 md:mb-4 flex items-center gap-2">
|
|
<span className="w-6 md:w-8 h-px bg-neutral-medium" />
|
|
<time dateTime={post.frontmatter.date}>
|
|
{new Date(post.frontmatter.date).toLocaleDateString(locale, {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric',
|
|
})}
|
|
</time>
|
|
</div>
|
|
<h3 className="text-lg md:text-xl font-bold text-primary group-hover:text-accent-dark transition-colors line-clamp-2 mb-4 md:mb-6 leading-tight">
|
|
{post.frontmatter.title}
|
|
</h3>
|
|
<div className="mt-auto flex items-center text-primary font-bold group-hover:underline decoration-2 underline-offset-4">
|
|
{t('readMore')}
|
|
<svg
|
|
className="ml-2 w-5 h-5 transition-transform group-hover:translate-x-2"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M17 8l4 4m0 0l-4 4m4-4H3"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</Container>
|
|
</Section>
|
|
);
|
|
}
|