81 lines
2.9 KiB
TypeScript
81 lines
2.9 KiB
TypeScript
import React from 'react';
|
|
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
import { Post } from '@/types/types';
|
|
import { Calendar, User, ArrowRight } from 'lucide-react';
|
|
|
|
interface FeaturedPostProps {
|
|
post: Post;
|
|
}
|
|
|
|
export function FeaturedPost({ post }: FeaturedPostProps) {
|
|
// Formatowanie daty
|
|
const dateObj = new Date(post.date);
|
|
const formattedDate = dateObj.toLocaleDateString('pl-PL', {
|
|
day: 'numeric',
|
|
month: 'long',
|
|
year: 'numeric'
|
|
});
|
|
|
|
// Tłumaczenie kategorii
|
|
const categoryLabels: Record<string, string> = {
|
|
'klimatyzacja': 'Klimatyzacja',
|
|
'pompy-ciepla': 'Pompy Ciepła',
|
|
'remonty': 'Remonty',
|
|
'hydraulika': 'Hydraulika',
|
|
'porady': 'Porady'
|
|
};
|
|
|
|
return (
|
|
<div className="group relative rounded-2xl overflow-hidden bg-white border border-border shadow-sm hover:shadow-lg transition-all duration-300">
|
|
<div className="flex flex-col md:flex-row">
|
|
{/* Obraz */}
|
|
<div className="relative w-full md:w-3/5 aspect-video md:aspect-auto md:min-h-[400px]">
|
|
<Image
|
|
src={post.image || 'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=1200&q=80'}
|
|
alt={post.title}
|
|
fill
|
|
className="object-cover transition-transform duration-700 group-hover:scale-105"
|
|
/>
|
|
<div className="absolute top-4 left-4">
|
|
<span className="px-3 py-1 bg-accent text-white text-xs font-bold rounded-full uppercase tracking-wider shadow-md">
|
|
{categoryLabels[post.category] || post.category}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Treść */}
|
|
<div className="p-8 md:p-12 flex flex-col justify-center w-full md:w-2/5">
|
|
<div className="flex items-center gap-4 text-text-muted text-sm font-medium mb-4">
|
|
<div className="flex items-center gap-1.5">
|
|
<Calendar className="w-4 h-4 text-primary/60" />
|
|
<span>{formattedDate}</span>
|
|
</div>
|
|
{post.author && (
|
|
<div className="flex items-center gap-1.5">
|
|
<User className="w-4 h-4 text-primary/60" />
|
|
<span>{post.author}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<h3 className="text-2xl md:text-3xl font-extrabold text-primary font-heading leading-tight mb-4 group-hover:text-accent transition-colors">
|
|
<Link href={`/blog/${post.slug}`} className="before:absolute before:inset-0">
|
|
{post.title}
|
|
</Link>
|
|
</h3>
|
|
|
|
<p className="text-text-muted leading-relaxed mb-8 line-clamp-3">
|
|
{post.excerpt}
|
|
</p>
|
|
|
|
<div className="flex items-center gap-2 text-primary font-semibold group-hover:text-accent transition-colors mt-auto">
|
|
<span>Czytaj pełny artykuł</span>
|
|
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|