88 lines
2.9 KiB
TypeScript
88 lines
2.9 KiB
TypeScript
import { useNavigate } from "react-router-dom"
|
||
import { Button } from "@/components/ui/button"
|
||
import type { Product } from "@/lib/models/product"
|
||
import vector from "../_assets/vector.webp"
|
||
|
||
type ProductGridProps = {
|
||
products: Product[]
|
||
}
|
||
|
||
export default function ProductGrid({ products }: ProductGridProps) {
|
||
const navigate = useNavigate()
|
||
|
||
return (
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-6 gap-6">
|
||
{products.map(product => (
|
||
<div
|
||
key={product.id}
|
||
className="relative overflow-visible rounded-xl shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white p-6 flex flex-col min-h-60"
|
||
>
|
||
{product.tag && (
|
||
<div className="absolute -top-5 -right-5">
|
||
<div className="relative">
|
||
<img src={vector} alt="打折" />
|
||
<span className="absolute inset-0 flex items-center justify-center text-xs font-bold">
|
||
{product.tag}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className="text-lg font-bold text-center text-gray-700">
|
||
{product.title}
|
||
</div>
|
||
|
||
{product.desc ? (
|
||
<div className="py-2 text-sm text-center text-orange-400 font-bold">
|
||
{product.desc}
|
||
</div>
|
||
) : (
|
||
<div className="py-2 text-sm text-center font-bold text-orange-400">
|
||
¥ {product.price.toFixed(2)}
|
||
</div>
|
||
)}
|
||
|
||
<div className="text-xs text-gray-400 flex flex-col space-y-0.5 mt-10">
|
||
{product.card && (
|
||
<div className="flex justify-between">
|
||
<span>卡种：</span>
|
||
<span>{product.card}</span>
|
||
</div>
|
||
)}
|
||
{product.originalPrice !== undefined && (
|
||
<div className="flex justify-between">
|
||
<span>原价：</span>
|
||
<span>¥{product.originalPrice.toFixed(2)}</span>
|
||
</div>
|
||
)}
|
||
{product.duration && (
|
||
<div className="flex justify-between">
|
||
<span>套餐有效期：</span>
|
||
<span>{product.duration}</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{product.features && product.features.length > 0 && (
|
||
<div className="text-xs text-gray-400 text-center space-y-0.5 mt-1">
|
||
{product.features.map((feature, index) => (
|
||
<div key={index}>{feature}</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
<div className="pt-4 mt-auto">
|
||
<Button
|
||
variant="outline"
|
||
className="w-full text-blue-500 border-blue-400 hover:bg-blue-50"
|
||
onClick={() => navigate("/product/buy", { state: { product } })}
|
||
>
|
||
立即购买
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)
|
||
}
|