106 lines
3.8 KiB
TypeScript
106 lines
3.8 KiB
TypeScript
import Link from "next/link";
|
|
import { ArrowRight, Calendar, User } from "lucide-react";
|
|
import { SectionHeading } from "../common/SectionHeading";
|
|
import { Placeholder } from "../common/Placeholder";
|
|
import { getLatestPosts } from "@/content/posts";
|
|
|
|
export function BlogPreview() {
|
|
const latestPosts = getLatestPosts(3);
|
|
|
|
const formatDate = (dateStr: string) => {
|
|
const d = new Date(dateStr);
|
|
return d.toLocaleDateString("pl-PL", {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
});
|
|
};
|
|
|
|
const getCategoryLabel = (cat: string) => {
|
|
const labels: Record<string, string> = {
|
|
klimatyzacja: "Klimatyzacja",
|
|
"pompy-ciepla": "Pompy ciepła",
|
|
porady: "Porady ogólne",
|
|
};
|
|
return labels[cat] || cat;
|
|
};
|
|
|
|
return (
|
|
<section className="py-16 md:py-24 bg-white">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<SectionHeading
|
|
eyebrow="Aktualności"
|
|
title="Najnowsze poradniki i artykuły"
|
|
subtitle="Dzielimy się wiedzą i doświadczeniem. Zobacz nasze wpisy dotyczące klimatyzacji i pomp ciepła oraz oszczędzania energii."
|
|
align="center"
|
|
/>
|
|
|
|
{/* Blog Posts Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{latestPosts.map((post) => (
|
|
<article
|
|
key={post.slug}
|
|
className="group flex flex-col justify-between border border-border rounded-xl overflow-hidden hover:shadow-md transition-shadow h-full"
|
|
>
|
|
<div>
|
|
{/* Thumbnail */}
|
|
<div className="bg-slate-50 border-b border-border">
|
|
<Placeholder
|
|
text={`Miniatura artykułu: ${post.title}`}
|
|
aspect="video"
|
|
/>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="p-6">
|
|
{/* Category & Date */}
|
|
<div className="flex items-center gap-4 text-xs text-text-muted mb-3">
|
|
<span className="font-semibold uppercase tracking-wider text-accent">
|
|
{getCategoryLabel(post.category)}
|
|
</span>
|
|
<span className="flex items-center gap-1">
|
|
<Calendar className="size-3.5" />
|
|
<span>{formatDate(post.date)}</span>
|
|
</span>
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<h3 className="text-lg font-bold text-primary font-heading line-clamp-2 leading-snug group-hover:text-accent transition-colors">
|
|
<Link href={`/blog/${post.slug}`}>{post.title}</Link>
|
|
</h3>
|
|
|
|
{/* Excerpt */}
|
|
<p className="text-sm text-text-muted mt-3 line-clamp-2 leading-relaxed">
|
|
{post.excerpt}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Read More Link */}
|
|
<div className="p-6 pt-0 mt-auto">
|
|
<Link
|
|
href={`/blog/${post.slug}`}
|
|
className="inline-flex items-center gap-1.5 text-sm font-semibold text-primary group-hover:text-accent transition-colors"
|
|
>
|
|
<span>Czytaj więcej</span>
|
|
<ArrowRight className="size-4 group-hover:translate-x-1 transition-transform" />
|
|
</Link>
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
|
|
{/* Blog Catalog Button */}
|
|
<div className="flex justify-center mt-12">
|
|
<Link href="/blog" className="btn btn-outline btn-primary bg-white font-bold flex items-center gap-2 group">
|
|
|
|
<span>Przejdź do bloga</span>
|
|
<ArrowRight className="size-4 group-hover:translate-x-1 transition-transform" />
|
|
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|