65 lines
2.3 KiB
TypeScript
65 lines
2.3 KiB
TypeScript
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
import type { BlogPost } from '../types';
|
|
|
|
interface BlogArticleCardProps {
|
|
post: BlogPost;
|
|
}
|
|
|
|
const categoryColors: Record<string, string> = {
|
|
guides: 'bg-violet-500/10',
|
|
tutorials: 'bg-blue-500/10',
|
|
'use-cases': 'bg-pink-500/10',
|
|
news: 'bg-emerald-500/10',
|
|
};
|
|
|
|
const formatShortDate = (dateString: string): string => {
|
|
const date = new Date(dateString);
|
|
return date.toLocaleDateString('en-US', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
});
|
|
};
|
|
|
|
export const BlogArticleCard = ({ post }: BlogArticleCardProps) => {
|
|
const overlayColor = categoryColors[post.category] || 'bg-violet-500/10';
|
|
|
|
return (
|
|
<Link
|
|
href={`/blog/${post.slug}`}
|
|
className="group flex flex-col bg-[#111827] rounded-xl overflow-hidden border border-white/5 hover:border-violet-500/50 transition-all hover:shadow-lg hover:shadow-violet-500/5 h-full"
|
|
>
|
|
<div className="aspect-video w-full relative overflow-hidden bg-gray-900">
|
|
<div
|
|
className={`absolute inset-0 ${overlayColor} group-hover:bg-transparent transition-colors z-10`}
|
|
/>
|
|
<Image
|
|
src={post.heroImage}
|
|
alt={post.title}
|
|
fill
|
|
className="object-cover transition-transform duration-500 group-hover:scale-105 opacity-80 group-hover:opacity-100"
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1280px) 50vw, 33vw"
|
|
/>
|
|
<div className="absolute top-3 left-3 z-20">
|
|
<span className="inline-flex items-center rounded-md bg-black/60 backdrop-blur-md px-2.5 py-1 text-xs font-medium text-white ring-1 ring-inset ring-white/10 capitalize">
|
|
{post.category}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="p-5 flex flex-col flex-1">
|
|
<h3 className="text-lg font-bold text-white mb-3 line-clamp-2 group-hover:text-violet-400 transition-colors leading-snug">
|
|
{post.title}
|
|
</h3>
|
|
<p className="text-sm text-gray-400 mb-4 line-clamp-2">
|
|
{post.description}
|
|
</p>
|
|
<div className="mt-auto flex items-center text-xs text-gray-500 font-medium">
|
|
<span>{formatShortDate(post.date)}</span>
|
|
<span className="mx-2">•</span>
|
|
<span>{post.readTime}</span>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
};
|