75 lines
2.5 KiB
TypeScript
75 lines
2.5 KiB
TypeScript
'use client';
|
||
|
||
import { Plus, Minus, Trash2 } from "lucide-react";
|
||
import { useCart } from "./context/cartcontext";
|
||
interface ProductCartActionProps {
|
||
product: any;
|
||
}
|
||
|
||
export default function ProductCartAction({ product }: ProductCartActionProps) {
|
||
const { addToCart, decreaseQuantity, cart } = useCart();
|
||
|
||
// بررسی وجود و تعداد محصول در سبد خرید
|
||
const cartItem = cart.find((item) => item.id === product.id);
|
||
const quantity = cartItem ? cartItem.quantity : 0;
|
||
|
||
const handleIncrease = (e: React.MouseEvent) => {
|
||
e.preventDefault();
|
||
addToCart(product);
|
||
};
|
||
|
||
const handleDecrease = (e: React.MouseEvent) => {
|
||
e.preventDefault();
|
||
decreaseQuantity(product.id);
|
||
};
|
||
|
||
// اگر محصول ناموجود بود
|
||
if (!product.stock) {
|
||
return (
|
||
<div className="flex gap-3 mb-8 h-[52px]">
|
||
<button disabled className="w-full rounded-xl font-bold text-white bg-gray-300 cursor-not-allowed">
|
||
ناموجود در انبار
|
||
</button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="flex gap-3 mb-8 h-[52px]">
|
||
{quantity > 0 ? (
|
||
// حالت ۲: محصول در سبد خرید وجود دارد (نمایش کنترلر کم و زیاد)
|
||
<div className="flex-1 flex items-center justify-between bg-white border-2 border-[#f59e0b] rounded-xl px-4 shadow-sm transition-all">
|
||
<button
|
||
onClick={handleIncrease}
|
||
className="text-gray-500 hover:text-green-600 transition-colors p-2 cursor-pointer"
|
||
>
|
||
<Plus size={20} />
|
||
</button>
|
||
|
||
<span className="text-xl font-bold text-gray-800 w-8 text-center">
|
||
{quantity}
|
||
</span>
|
||
|
||
<button
|
||
onClick={handleDecrease}
|
||
className="text-gray-500 hover:text-red-500 transition-colors p-2 cursor-pointer"
|
||
>
|
||
{quantity === 1 ? <Trash2 size={20} /> : <Minus size={20} />}
|
||
</button>
|
||
</div>
|
||
) : (
|
||
// حالت ۱: پیشفرض (دکمه نارنجی افزودن به سبد مطابق با تصویر)
|
||
<>
|
||
<button
|
||
onClick={handleIncrease}
|
||
className="flex-1 rounded-xl font-bold text-white transition-all flex items-center justify-center gap-2 bg-[#f59e0b] hover:bg-amber-600 shadow-lg shadow-amber-500/20 cursor-pointer"
|
||
>
|
||
افزودن به سبد
|
||
</button>
|
||
|
||
</>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|