74 lines
2.3 KiB
TypeScript
74 lines
2.3 KiB
TypeScript
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { Calendar, Clock, ArrowLeft } from "lucide-react";
|
|
import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card";
|
|
|
|
interface BlogCardProps {
|
|
slug: string;
|
|
title: string;
|
|
excerpt: string;
|
|
date: string;
|
|
readTime: string;
|
|
category: string;
|
|
image: string;
|
|
}
|
|
|
|
export function BlogCard({
|
|
slug,
|
|
title,
|
|
excerpt,
|
|
date,
|
|
readTime,
|
|
category,
|
|
image,
|
|
}: BlogCardProps) {
|
|
return (
|
|
<Link href={`/blog/${slug}`} className="group block h-full">
|
|
<Card className="h-full flex flex-col overflow-hidden transition-all duration-300 hover:shadow-lg hover:-translate-y-1 dark:border-transparent">
|
|
{/* Image with 3:2 aspect ratio */}
|
|
<div className="relative aspect-[5/3] w-full overflow-hidden bg-muted">
|
|
<Image
|
|
src={image}
|
|
alt={title}
|
|
fill
|
|
className="object-cover transition-transform duration-300 group-hover:scale-105"
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
|
|
/>
|
|
{/* Category Badge */}
|
|
<div className="absolute top-4 right-4">
|
|
<span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-primary/90 text-primary-foreground backdrop-blur-sm">
|
|
{category}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<CardHeader className="flex-1 flex flex-col">
|
|
<h3 className="text-base py-2 font-bold leading-tight tracking-normal group-hover:text-primary transition-colors line-clamp-2">
|
|
{title}
|
|
</h3>
|
|
</CardHeader>
|
|
|
|
<CardContent className="flex-1">
|
|
<p className="text-muted-foreground leading-relaxed tracking-normal line-clamp-3 text-sm">
|
|
{excerpt}
|
|
</p>
|
|
</CardContent>
|
|
|
|
<CardFooter className="flex items-center justify-between gap-4 text-xs text-muted-foreground border-t pt-4">
|
|
<div className="flex items-center gap-2">
|
|
<Calendar className="size-4" />
|
|
<span>{date}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Clock className="size-4" />
|
|
<span>{readTime} دقیقه</span>
|
|
</div>
|
|
</CardFooter>
|
|
</Card>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
|
|
|