43 lines
1.3 KiB
JavaScript
43 lines
1.3 KiB
JavaScript
import React from "react";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
|
|
const Product = ({ title, price, sales, imageUrl, isVip, id }) => {
|
|
return (
|
|
<Link href={`/good/${id}`}>
|
|
<div className="bg-white rounded-lg p-4 shadow-sm">
|
|
<div className="relative aspect-[16/9]">
|
|
<Image
|
|
src={imageUrl}
|
|
alt={title}
|
|
fill
|
|
className="object-cover rounded-lg"
|
|
/>
|
|
</div>
|
|
|
|
<div className="mt-3">
|
|
<h3 className="text-sm text-gray-900 line-clamp-2">{title}</h3>
|
|
|
|
<div className="mt-2 flex items-center justify-between">
|
|
<div className="flex items-center">
|
|
<span className="text-red-500 text-lg font-medium">¥{price}</span>
|
|
{isVip && (
|
|
<span className="ml-1 px-1 text-xs text-yellow-600 border border-yellow-600 rounded">
|
|
VIP
|
|
</span>
|
|
)}
|
|
</div>
|
|
<span className="text-xs text-gray-500">已售{sales}件</span>
|
|
</div>
|
|
|
|
<button className="mt-3 w-full bg-yellow-400 text-sm text-white py-2 px-4 rounded-full hover:bg-yellow-500">
|
|
购买
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
export default Product;
|