37 lines
1.4 KiB
TypeScript
37 lines
1.4 KiB
TypeScript
import Link from 'next/link';
|
|
import type { Product } from '@/lib/types';
|
|
import { resolveUploadUrl } from '@/lib/utils';
|
|
|
|
export function ProductCard({ product }: { product: Product }) {
|
|
return (
|
|
<Link
|
|
href={`/products/${product.id}`}
|
|
className="group block overflow-hidden rounded-xl border border-slate-200/70 bg-white shadow-[0_1px_3px_rgba(15,23,42,0.04)] transition-all duration-300 hover:-translate-y-1 hover:border-brand-200 hover:shadow-[0_12px_32px_-12px_rgba(79,70,229,0.25)]"
|
|
>
|
|
<div className="aspect-[4/3] overflow-hidden bg-slate-100">
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src={resolveUploadUrl(product.cover)}
|
|
alt={product.name}
|
|
className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
|
|
/>
|
|
</div>
|
|
<div className="p-4">
|
|
<h3 className="text-base font-semibold text-slate-900 transition-colors group-hover:text-brand-600">
|
|
{product.name}
|
|
</h3>
|
|
{product.desc && (
|
|
<p className="mt-1 line-clamp-2 text-sm text-slate-500">
|
|
{product.desc}
|
|
</p>
|
|
)}
|
|
{product.category?.name && (
|
|
<span className="mt-3 inline-block rounded bg-brand-50 px-2 py-0.5 text-xs font-medium text-brand-600">
|
|
{product.category.name}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|