44 lines
1004 B
TypeScript
44 lines
1004 B
TypeScript
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
|
|
export function ArticleCard({
|
|
url,
|
|
title,
|
|
tag,
|
|
cover,
|
|
team,
|
|
date,
|
|
}: {
|
|
url: string;
|
|
title: string;
|
|
tag?: string;
|
|
cover: string;
|
|
team?: string;
|
|
date: Date;
|
|
}) {
|
|
return (
|
|
<Link
|
|
href={url}
|
|
key={url}
|
|
className="border rounded-lg overflow-hidden bg-background-light col hover:scale-105 transition-all duration-300 hover:shadow-lg hover:shadow-background-dark"
|
|
>
|
|
<Image
|
|
src={cover}
|
|
alt={title}
|
|
width={323}
|
|
height={181}
|
|
className="w-full"
|
|
/>
|
|
<span className="p-4 col flex-1">
|
|
{tag && <span className="font-mono text-xs mb-2">{tag}</span>}
|
|
<span className="flex-1 mb-6">
|
|
<h2 className="text-xl font-semibold">{title}</h2>
|
|
</span>
|
|
<p className="text-sm text-muted-foreground">
|
|
{[team, date.toLocaleDateString()].filter(Boolean).join(' · ')}
|
|
</p>
|
|
</span>
|
|
</Link>
|
|
);
|
|
}
|