53 lines
2.2 KiB
TypeScript
53 lines
2.2 KiB
TypeScript
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import type { BlogPost } from "@/lib/blog";
|
|
|
|
export default function BlogCard({ post }: { post: BlogPost }) {
|
|
const formattedDate = new Date(post.publishedAt).toLocaleDateString("pl-PL", {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
});
|
|
|
|
const categoryLabel = post.category === "case-study" ? "Case Study" : "Blog";
|
|
const categoryColor = post.category === "case-study" ? "bg-purple-500/10 text-purple-400" : "bg-cyan-500/10 text-cyan-400";
|
|
|
|
return (
|
|
<Link href={`/blog/${post.slug}/`}>
|
|
<article className="bg-gray-800 border border-gray-700 rounded-2xl p-6 hover:border-cyan-500/50 hover:-translate-y-1 hover:shadow-lg hover:shadow-cyan-500/10 transition-all duration-300 h-full flex flex-col group">
|
|
<div className="mb-4 rounded-xl overflow-hidden bg-gray-700 relative h-48">
|
|
<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, (max-width: 1200px) 50vw, 33vw"
|
|
/>
|
|
</div>
|
|
<div className="flex items-center gap-3 mb-3">
|
|
<span className={`px-3 py-1 rounded-full text-xs font-medium ${categoryColor}`}>{categoryLabel}</span>
|
|
<time className="text-gray-500 text-sm" dateTime={post.publishedAt.toISOString()}>
|
|
{formattedDate}
|
|
</time>
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-white mb-3 group-hover:text-cyan-400 transition-colors">
|
|
{post.title}
|
|
</h3>
|
|
<p className="text-gray-400 leading-relaxed mb-4 flex-grow">{post.excerpt}</p>
|
|
<div className="flex items-center justify-between pt-4 border-t border-gray-700">
|
|
<div className="flex flex-wrap gap-2">
|
|
{post.tags.slice(0, 3).map((tag) => (
|
|
<span key={tag} className="text-xs text-gray-500">
|
|
#{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
<span className="text-cyan-400 text-sm font-medium group-hover:translate-x-1 transition-transform">
|
|
Czytaj więcej →
|
|
</span>
|
|
</div>
|
|
</article>
|
|
</Link>
|
|
);
|
|
}
|