web/components/Cards/Components/AddToCart/page.jsx

63 lines
2.0 KiB
JavaScript

"use client";
import AppContext from "@ctx/AppContext";
import PersianNumber from "plugins/PersianNumber";
import React, { useContext } from "react";
const AddToCart = ({ data }) => {
const CTX = useContext(AppContext);
const cart = CTX.state.cart;
const handleAddItemToCart = (id) => {
CTX.AddItemToCart(
data.id,
data.persianName,
data.cost,
data.costWithDiscount,
data.mainImage,
data.hasDiscount,
data.maxOrderCount
);
};
return (
<>
{data.stock == 0 ? (
<div className="bg-gray-200 w-full h-fit p-2 rounded-xl">
<p className="mb-0 text-[12px] text-center ">اتمام موجودی</p>
</div>
) : (
<div className="flex">
{!cart.find((item) => item.id === data.id) ? (
<div className="w-[25px] h-[25px] bg-gray-100 overflow-hidden rounded-lg text-center p-1 m-1 cursor-pointer">
<div onClick={() => handleAddItemToCart()}>
<p className="mb-0 text-[25px] mt-[-10px]">+</p>
</div>
</div>
) : (
<div className="flex rtl bg-gray-50 p-1 h-fit rounded-lg">
<div
className="w-[25px] h-[25px] bg-gray-200 overflow-hidden rounded-lg text-center cursor-pointer "
onClick={() => handleAddItemToCart()}
>
<p className="mb-0 text-[20px] mt-[-2px]">+</p>
</div>
<p className="mb-0 mx-2 mt-1 text-sm ">
<PersianNumber
number={cart.find((item) => item.id === data.id).count}
/>
</p>
<div
className="w-[25px] h-[25px] bg-red-200 overflow-hidden rounded-lg text-center cursor-pointer "
onClick={() => CTX.RemoveItemFromCart(data.id)}
>
<p className="mb-0 text-[20px] mt-[-2px]">-</p>
</div>
</div>
)}
</div>
)}
</>
);
};
export default AddToCart;