28 lines
2.1 KiB
TypeScript
28 lines
2.1 KiB
TypeScript
import { ArrowLeft, Clock3 } from "lucide-react";
|
||
import { Link } from "react-router";
|
||
import type { Article } from "@/api/mockData";
|
||
import SafeImage from "./SafeImage";
|
||
|
||
export default function ArticleCard({ article, featured = false }: { article: Article; featured?: boolean }) {
|
||
return (
|
||
<article className={`group flex h-full overflow-hidden rounded-[24px] border border-slate-200 bg-white transition duration-300 hover:-translate-y-1 hover:shadow-[0_18px_50px_rgba(42,36,91,.10)] ${featured ? "sm:grid sm:grid-cols-[1.05fr_.95fr]" : "flex-col"}`}>
|
||
<Link to={`/magazine/articles/${article.slug}`} className={`relative block shrink-0 overflow-hidden bg-[#eeecff] ${featured ? "min-h-[280px]" : "aspect-[16/10] w-full"}`}>
|
||
<SafeImage src={article.image} alt={article.imageAlt} className="h-full w-full object-cover transition duration-500 group-hover:scale-105" />
|
||
<span className={`absolute right-4 top-4 rounded-full px-3 py-1.5 text-xs font-black ${article.color}`}>{article.category}</span>
|
||
</Link>
|
||
<div className={`flex min-w-0 flex-1 flex-col ${featured ? "justify-center p-6 sm:p-8" : "p-5"}`}>
|
||
<div className="mb-3 flex flex-wrap items-center gap-2.5 text-xs font-bold text-slate-400">
|
||
<span>{article.grade}</span><span className="size-1 rounded-full bg-slate-300" /><span className="inline-flex items-center gap-1"><Clock3 size={13} /> {article.readTime}</span>
|
||
</div>
|
||
<h3 className={`${featured ? "text-2xl" : "line-clamp-2 min-h-[3.7rem] text-lg"} font-black leading-[1.65] text-slate-900 transition group-hover:text-[#5146c7]`}>
|
||
<Link to={`/magazine/articles/${article.slug}`}>{article.title}</Link>
|
||
</h3>
|
||
<p className={`mt-2 line-clamp-2 text-sm leading-7 text-slate-500 ${featured ? "" : "min-h-14"}`}>{article.excerpt}</p>
|
||
<Link to={`/magazine/articles/${article.slug}`} className="mt-auto inline-flex items-center gap-1.5 pt-5 text-sm font-black text-[#5b50d6]">
|
||
ادامه مطلب <ArrowLeft size={16} className="transition group-hover:-translate-x-1" />
|
||
</Link>
|
||
</div>
|
||
</article>
|
||
);
|
||
}
|