107 lines
4.5 KiB
TypeScript
107 lines
4.5 KiB
TypeScript
'use client';
|
||
|
||
import { Phone } from "lucide-react";
|
||
import Image from "next/image";
|
||
import Link from 'next/link';
|
||
import { useCart } from "./context/cartcontext";
|
||
import { Product } from "@/public/src/types/product";
|
||
import CartControls from "./CartControls";
|
||
|
||
interface ProductCardProps {
|
||
product: Product;
|
||
}
|
||
|
||
export default function ProductCard({ product }: ProductCardProps) {
|
||
// دریافت استیتهای لوکال و سرور از کانتکست
|
||
const { cart, serverCartItems, isLoggedIn } = useCart();
|
||
|
||
const slug = product.slug;
|
||
|
||
// منطق یافتن شناسه ردیف سبد خرید و تعداد بر اساس وضعیت لاگین
|
||
let cartItemId = null;
|
||
let quantity = 0;
|
||
|
||
if (isLoggedIn && serverCartItems) {
|
||
// اگر لاگین بود، از سبد خرید سرور میخوانیم
|
||
const serverItem = serverCartItems.find((item) => item.product?.id === product.id);
|
||
if (serverItem) {
|
||
cartItemId = serverItem.id;
|
||
quantity = serverItem.quantity;
|
||
}
|
||
} else {
|
||
// اگر مهمان بود، از لوکال استوریج میخوانیم
|
||
const localItem = cart.find(item => item.id === product.id);
|
||
if (localItem) {
|
||
quantity = localItem.quantity;
|
||
}
|
||
}
|
||
|
||
const formattedPrice = product.price
|
||
? Number(product.price.toString().replace(/,/g, '')).toLocaleString('fa-IR')
|
||
: null;
|
||
|
||
return (
|
||
<Link href={`/product/${slug}`} scroll={true} className="bg-white gap-1 flex flex-col justify-between border border-gray-200 rounded-xl shadow-sm p-4 transition-all hover:shadow-md">
|
||
|
||
<div className="relative flex justify-center mb-4">
|
||
<span
|
||
className={`absolute top-0 right-0 font-semibold text-[0.6em] px-2 py-1 rounded-2xl ${product.stock ? "bg-[#00c9512e] text-[#035702] border border-[#03570263] " : "bg-[#f92a3521] text-[#cf0000] border border-[#cf000047]"}`}
|
||
>
|
||
{product.stock ? "موجود" : "ناموجود"}
|
||
</span>
|
||
|
||
<Image
|
||
src={product.image || "/placeholder.png"}
|
||
width={150}
|
||
height={150}
|
||
alt={product.title}
|
||
/>
|
||
</div>
|
||
|
||
<p className="text-[#808080] text-sm">{product.brand}</p>
|
||
<h3 className="text-sm font-semibold">{product.title}</h3>
|
||
<div className="text-xs text-gray-500 mt-2">
|
||
{product.attributes?.[0] && (
|
||
<div className="flex border-b border-[#dfdfdf] mb-2 pb-2 justify-between">
|
||
<p className="text-[0.9em]">{product.attributes[0].name}:</p>
|
||
<p dir="rtl" className="font-semibold text-left text-[0.8em] text-black">{product.attributes[0].valueText || "-"}</p>
|
||
</div>
|
||
)}
|
||
|
||
{product.attributes?.[1] && (
|
||
<div className="flex justify-between">
|
||
<p className="text-[0.9em]">{product.attributes[1].name}:</p>
|
||
<p dir="rtl" className="font-semibold text-left text-[0.8em] text-black">{product.attributes[1].valueText || "-"}</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{product.price ? (
|
||
<div className="flex justify-between mt-3 items-center min-h-[32px]">
|
||
<span className="text-[0.85em] font-bold text-gray-800">
|
||
{formattedPrice} تومان
|
||
</span>
|
||
|
||
{product.stock ? (
|
||
// استفاده از کامپوننت CartControls دقیقا با همان UI قبلی
|
||
<CartControls
|
||
product={product}
|
||
cartItemId={cartItemId}
|
||
quantity={quantity}
|
||
/>
|
||
) : (
|
||
<span className="text-[10px] text-red-500 font-medium bg-red-50 px-2 py-1 rounded-md">
|
||
عدم موجودی
|
||
</span>
|
||
)}
|
||
</div>
|
||
) : (
|
||
<span className="flex justify-between mt-3 text-[0.85em] font-bold items-center gap-1 min-h-[32px] text-gray-700">
|
||
استعلام
|
||
<Phone className="mb-1" size={13} />
|
||
</span>
|
||
)}
|
||
</Link>
|
||
);
|
||
}
|