79 lines
3.6 KiB
TypeScript
79 lines
3.6 KiB
TypeScript
'use client';
|
||
|
||
import Image from "next/image";
|
||
import Link from "next/link";
|
||
import { Calendar, ArrowLeft } from 'lucide-react';
|
||
|
||
// تابع استانداردسازی عنوان (بدون تغییر طبق درخواست شما)
|
||
const generateSlug = (text: string) => {
|
||
if (!text) return "";
|
||
return text
|
||
.trim()
|
||
.replace(/[\s\u200c]+/g, '-')
|
||
.replace(/[^\w\u0600-\u06FF0-9\-]/g, '')
|
||
.replace(/\-\-+/g, '-')
|
||
.replace(/^-+|-+$/g, '');
|
||
};
|
||
|
||
interface Article {
|
||
title: string;
|
||
image: string;
|
||
excerpt: string;
|
||
date: string;
|
||
category?: string; // اختیاری: اگر در دیتا دارید استفاده میشود
|
||
}
|
||
|
||
export default function ArticleCard({ article }: { article: Article }) {
|
||
const articleSlug = generateSlug(article.title);
|
||
|
||
return (
|
||
<Link href={`/blog/${articleSlug}`} className="group block h-full">
|
||
<div className="bg-white rounded-[1rem] border border-gray-100 shadow-sm transition-all duration-500 flex flex-col h-[100%] overflow-hidden">
|
||
|
||
{/* بخش تصویر با نسبت ابعاد متناسب (مربعیتر) */}
|
||
<div className="relative aspect-[16/11] w-full overflow-hidden">
|
||
<Image
|
||
src={article.image}
|
||
alt={article.title}
|
||
fill
|
||
className="object-cover transition-transform duration-700 group-hover:scale-110"
|
||
/>
|
||
{/* لایه گرادینت روی عکس برای عمق دادن */}
|
||
<div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
|
||
</div>
|
||
|
||
{/* محتوای متنی */}
|
||
<div className="p-4 flex flex-col flex-grow">
|
||
{/* تاریخ مقاله */}
|
||
<div className="flex items-center gap-2 text-gray-400 text-[10px] mb-3 font-semibold uppercase tracking-wider">
|
||
<Calendar size={13} className="text-yellow-500" />
|
||
<span>{article.date}</span>
|
||
</div>
|
||
|
||
{/* عنوان مقاله */}
|
||
<h3 className="text-[15px] font-bold text-gray-800 mb-3 leading-relaxed group-hover:text-yellow-600 transition-colors line-clamp-2">
|
||
{article.title}
|
||
</h3>
|
||
|
||
{/* خلاصه متن */}
|
||
<p className="text-gray-500 text-xs leading-6 mb-5 line-clamp-2 font-light">
|
||
{article.excerpt}
|
||
</p>
|
||
|
||
{/* فوتر کارت - دکمه ادامه مطلب مدرن */}
|
||
<div className="mt-auto pt-4 border-t border-gray-50 flex items-center justify-between">
|
||
<span className="text-yellow-600 text-xs font-bold flex items-center gap-1.5 transform -translate-x-2 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition-all duration-300">
|
||
مطالعه مقاله
|
||
<ArrowLeft size={14} />
|
||
</span>
|
||
|
||
<div className="w-8 h-8 rounded-full bg-gray-50 flex items-center justify-center text-gray-400 group-hover:bg-yellow-500 group-hover:text-white transition-all duration-300">
|
||
<ArrowLeft size={16} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Link>
|
||
);
|
||
}
|