MMD
fe6957bf83
# Conflicts: # frontend/src/admin/ArticleWritePage.tsx # frontend/src/admin/EntityDrawer.tsx # frontend/src/admin/entities.ts # frontend/src/components/ArticleCard.tsx # frontend/src/index.css
56 lines
3.0 KiB
TypeScript
56 lines
3.0 KiB
TypeScript
import React from 'react'
|
|
import { Link } from 'react-router-dom'
|
|
import { ArrowLeftIcon, ClockIcon } from 'lucide-react'
|
|
import type { Article } from '../data/site'
|
|
import { formatJalali } from '../utils/date'
|
|
import { useLang } from '../i18n/lang'
|
|
import { toPersianDigits } from '../utils/digits'
|
|
|
|
export function ArticleCard({ article }: { article: Article }) {
|
|
const { t, href } = useLang()
|
|
return (
|
|
<Link
|
|
to={href(`/blog/${article.slug}`)}
|
|
className="group flex h-full flex-col overflow-hidden 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">
|
|
<img
|
|
src={article.image}
|
|
alt={`${t('articleImagePrefix')} ${article.title}`}
|
|
className="h-52 w-full object-cover transition-transform duration-700 ease-lux group-hover:scale-105"
|
|
/>
|
|
{/* برچسب دستهبندی کپسولی شیشهای روی تصویر */}
|
|
<div className="absolute top-4 ltr:left-4 rtl:right-4 rounded-full border border-white/20 bg-ink/75 px-3.5 py-1 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-7">
|
|
<h3 className="text-lg font-bold leading-8 text-ivory transition-colors duration-300 group-hover:text-copper">
|
|
{article.title}
|
|
</h3>
|
|
|
|
<p className="mt-3 mb-8 text-sm font-light leading-7 text-ivory/60 line-clamp-3">
|
|
{article.excerpt}
|
|
</p>
|
|
|
|
<div className="mt-auto flex items-center justify-between border-t border-white/10 pt-5 text-xs font-light text-ivory/50">
|
|
<span className="flex items-center gap-3">
|
|
<span>{formatJalali(article.date)}</span>
|
|
<span className="flex items-center gap-1.5">
|
|
<ClockIcon className="h-3.5 w-3.5 text-copper/80" />
|
|
{toPersianDigits(article.read)}
|
|
</span>
|
|
</span>
|
|
|
|
{/* دکمه کپسولی ادامه مطلب با افکت شیشهای */}
|
|
<span className="inline-flex items-center gap-2 rounded-full border border-copper/40 bg-copper/5 px-3.5 py-1.5 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)]">
|
|
{t('readMore')}
|
|
<ArrowLeftIcon className="h-3.5 w-3.5 ltr:-scale-x-100 transition-transform duration-300 rtl:group-hover:-translate-x-1 ltr:group-hover:translate-x-1" />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
)
|
|
} |