98 lines
4.2 KiB
TypeScript
98 lines
4.2 KiB
TypeScript
"use client";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { BlogPost } from "@/lib/blog";
|
|
|
|
interface FeaturedBlogProps {
|
|
posts: BlogPost[];
|
|
}
|
|
|
|
const CalendarIcon = () => (
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
|
|
<line x1="16" y1="2" x2="16" y2="6" />
|
|
<line x1="8" y1="2" x2="8" y2="6" />
|
|
<line x1="3" y1="10" x2="21" y2="10" />
|
|
</svg>
|
|
);
|
|
|
|
const ArrowRightIcon = () => (
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<line x1="5" y1="12" x2="19" y2="12" />
|
|
<polyline points="12 5 19 12 12 19" />
|
|
</svg>
|
|
);
|
|
|
|
export default function FeaturedBlog({ posts }: FeaturedBlogProps) {
|
|
if (!posts || posts.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<section className="py-20 bg-gray-900">
|
|
<div className="max-w-6xl mx-auto px-4">
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
|
|
Najnowsze wpisy z bloga
|
|
</h2>
|
|
<p className="text-gray-400 text-lg">
|
|
Dowiedz się więcej o AI, automatyzacji i innowacjach technologicznych
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-3 gap-8 mb-12">
|
|
{posts.slice(0, 3).map((post) => (
|
|
<Link
|
|
key={post.slug}
|
|
href={`/blog/${post.slug}`}
|
|
className="group bg-gray-800 rounded-lg overflow-hidden border border-gray-700 hover:border-cyan-500 transition-all duration-300"
|
|
>
|
|
<div className="aspect-video overflow-hidden bg-gray-700 relative">
|
|
<Image
|
|
src={post.coverImage || '/blog/ai-automation.jpg'}
|
|
alt={post.title}
|
|
fill
|
|
className="object-cover group-hover:scale-105 transition-transform duration-300"
|
|
sizes="(max-width: 768px) 100vw, 33vw"
|
|
/>
|
|
</div>
|
|
<div className="p-6">
|
|
<div className="flex items-center gap-2 text-sm text-gray-400 mb-3">
|
|
<CalendarIcon />
|
|
{new Date(post.publishedAt).toLocaleDateString("pl-PL", {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
})}
|
|
</div>
|
|
<h3 className="text-xl font-bold text-white mb-2 group-hover:text-cyan-400 transition-colors">
|
|
{post.title}
|
|
</h3>
|
|
<p className="text-gray-400 text-sm line-clamp-2 mb-4">
|
|
{post.excerpt}
|
|
</p>
|
|
<div className="flex items-center text-cyan-400 text-sm font-medium">
|
|
Czytaj więcej
|
|
<span className="ml-2 group-hover:translate-x-1 transition-transform inline-block">
|
|
<ArrowRightIcon />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
<div className="text-center">
|
|
<Link
|
|
href="/blog"
|
|
className="inline-flex items-center gap-2 px-6 py-3 bg-cyan-500 hover:bg-cyan-600 text-white font-medium rounded-lg transition-colors"
|
|
>
|
|
Zobacz wszystkie wpisy
|
|
<ArrowRightIcon />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|