aramesh-site deploy
884902e054
ArticleCard همیشه slug فارسی میساخت؛ در /en این نشانی به صفحهٔ فارسی میرفت (ناسازگار با canonical سمت سرور که اسلاگ انگلیسی است).
59 lines
3.8 KiB
TypeScript
59 lines
3.8 KiB
TypeScript
import { Link } from 'react-router-dom'
|
|
import { ArrowLeftIcon, ClockIcon } from 'lucide-react'
|
|
import type { Article } from '../data/site'
|
|
import { formatJalali, formatEnDate } from '../utils/date'
|
|
import { useLang } from '../i18n/lang'
|
|
import { toPersianDigits } from '../utils/digits'
|
|
|
|
export function ArticleCard({ article }: { article: Article }) {
|
|
const { t, href, lang } = useLang()
|
|
// در انگلیسی نشانی اسلاگ انگلیسی — canonical سمت سرور هم همان است
|
|
const linkSlug = lang === 'en' && article.slug_en ? article.slug_en : article.slug
|
|
return (
|
|
<Link
|
|
to={href(`/blog/${encodeURIComponent(linkSlug)}`)}
|
|
className="group flex h-full flex-col overflow-hidden rounded-xl md:rounded-2xl border border-white/10 bg-char/80 backdrop-blur-xl shadow-[0_10px_30px_rgba(0,0,0,0.3)] transition-all duration-500 ease-lux hover:-translate-y-2 hover:border-copper/50 hover:shadow-[0_20px_40px_rgba(0,0,0,0.6),0_0_30px_rgba(197,143,92,0.18)] focus:outline-none focus-visible:ring-2 focus-visible:ring-copper"
|
|
aria-label={`${t('readArticlePrefix')} ${article.title}`}
|
|
>
|
|
<div className="relative overflow-hidden aspect-[16/10] w-full">
|
|
<img
|
|
src={article.image}
|
|
alt={`${t('articleImagePrefix')} ${article.title}`}
|
|
className="h-52 md:h-full w-full object-cover transition-transform duration-700 ease-lux group-hover:scale-105"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
{/* برچسب دستهبندی کپسولی شیشهای روی تصویر */}
|
|
<div className="absolute top-3 ltr:left-3 rtl:right-3 md:top-4 md:ltr:left-4 md:rtl:right-4 rounded-full border border-white/20 bg-ink/75 px-2.5 py-0.5 md:px-3.5 md:py-1 text-[11px] md:text-xs font-light text-copper backdrop-blur-xl shadow-[inset_0_1px_1px_rgba(255,255,255,0.2),0_4px_15px_rgba(0,0,0,0.4)]">
|
|
{article.category}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-1 flex-col p-3.5 md:p-8">
|
|
<h3 className="mb-1.5 md:mb-6 text-xs md:text-xl font-bold leading-snug md:leading-relaxed text-ivory line-clamp-2 transition-colors duration-300 group-hover:text-copper">
|
|
{article.title}
|
|
</h3>
|
|
|
|
<p className="mb-2.5 md:mb-10 text-[11px] md:text-[15px] font-light leading-relaxed md:leading-loose text-ivory/60 line-clamp-2 md:line-clamp-3">
|
|
{article.excerpt}
|
|
</p>
|
|
|
|
<div className="mt-auto flex items-center justify-between border-t border-white/10 pt-2.5 md:pt-8 text-[11px] md:text-xs font-light text-ivory/50">
|
|
<span className="flex items-center gap-2.5 md:gap-4">
|
|
<span>{lang === 'en' ? formatEnDate(article.date) : formatJalali(article.date)}</span>
|
|
<span className="flex items-center gap-1.5 md:gap-2">
|
|
<ClockIcon className="h-3 w-3 md:h-3.5 md:w-3.5 text-copper/80" />
|
|
{lang === 'en' ? article.read : toPersianDigits(article.read)}
|
|
</span>
|
|
</span>
|
|
|
|
{/* دکمه کپسولی ادامه مطلب با افکت شیشهای */}
|
|
<span className="inline-flex items-center gap-1.5 md:gap-2 rounded-full border border-copper/40 bg-copper/5 px-2.5 py-1 md:px-3.5 md:py-1.5 text-[11px] md:text-xs font-medium text-copper backdrop-blur-md shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)] transition-all duration-300 ease-lux group-hover:border-copper group-hover:bg-copper group-hover:text-char group-hover:shadow-[0_0_15px_rgba(197,143,92,0.5)] rtl:group-hover:[&>svg]:-translate-x-1 ltr:group-hover:[&>svg]:translate-x-1">
|
|
{t('readMore')}
|
|
<ArrowLeftIcon className="h-3 w-3 md:h-3.5 md:w-3.5 ltr:-scale-x-100 transition-transform duration-300" />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
)
|
|
} |