30 lines
1.2 KiB
TypeScript
30 lines
1.2 KiB
TypeScript
type BlogBlocksCardProps = {
|
|
category: string;
|
|
title: string;
|
|
description: string;
|
|
date: string;
|
|
authors: string[];
|
|
};
|
|
|
|
export function BlogBlocksCard({ category, title, description, date, authors }: BlogBlocksCardProps) {
|
|
return (
|
|
<article
|
|
data-slot="card"
|
|
className="group relative row-span-5 grid grid-rows-subgrid gap-3 rounded-xl bg-card bg-linear-to-b from-card from-65% to-transparent p-6 text-card-foreground shadow-xl ring-1 shadow-black/6.5 ring-border"
|
|
>
|
|
<time className="text-sm text-muted-foreground">{date}</time>
|
|
<h2 className="text-lg font-semibold text-foreground">{title}</h2>
|
|
<p className="text-muted-foreground">{description}</p>
|
|
<div className="grid grid-cols-[1fr_auto] items-end gap-2 pt-4">
|
|
<div className="space-y-1">
|
|
<span className="text-xs uppercase tracking-wide text-muted-foreground/80">{category}</span>
|
|
<div className="text-sm text-muted-foreground">{authors.join(", ")}</div>
|
|
</div>
|
|
<div className="flex h-6 items-center text-sm font-medium text-primary transition-colors duration-200 group-hover:text-foreground">
|
|
ادامه مطلب
|
|
</div>
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|