web/components/Cards/CardCart/page.jsx

83 lines
2.8 KiB
JavaScript

"use client";
import Image from "next/image";
import PersianNumber from "plugins/PersianNumber";
import React, { useContext } from "react";
import logo from "../../../public/images/logo.png";
import p2 from "../../../public/images/product/2.png";
import AppContext from "@ctx/AppContext";
import AddToCart from "../Components/AddToCart/page";
import Link from "next/link";
const CardCart = ({ data }) => {
const CTX = useContext(AppContext);
return (
<div className="group border-t-[1px] border-gray-100 w-full hover:bg-white z-40 tr03 flex rtl pt-2">
<Link href={`/products/${data.id}`}>
<div className=" h-fit ">
{!!data.mainImage ? (
<Image
src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${data.mainImage}`}
width={100}
height={100}
className="xs:!w-[110px] lg:!w-[130px] mx-auto !object-cover"
/>
) : (
<div className="xs:!w-[85px] lg:!w-[85px] ">
<Image
src={logo}
className="xs:!w-[70px] lg:!w-[70px] mx-auto !object-cover opacity-25 mt-5"
/>
</div>
)}
</div>
</Link>
<div className="p-3 text-right w-full">
<Link href={`/products/${data.id}`}>
<p className="mb-0 xs:text-[12px] lg:text-[11px] xl:text-[15px] max-h-[50px] tr03 ">
{data?.persianName}
</p>
</Link>
<div className=" rounded-full flex ltr pt-2 mt-2 w-full">
<AddToCart data={data} theme={1} />
<div className="w-full text-right rounded-full">
{data?.hasDiscount ? (
<div className="flex justify-end relative">
<p className="mb-0 font-bold text-sm absolute opacity-40 mt-[-7px] ml-[20px] text-red-600">
<del>
<PersianNumber
number={(data?.cost / 10).toLocaleString()}
style={"text-[13px]"}
/>
</del>
</p>
<div className="flex rtl mt-[8px]">
{" "}
<p className="mb-0 font-bold">
<PersianNumber
number={(data?.costWithDiscount / 10).toLocaleString()}
/>
</p>
<small className="mr-1 mt-[3px]">تومان</small>
</div>
</div>
) : (
<div className="flex rtl mt-[3px]">
{" "}
<p className="mb-0 font-bold text-lg">
<PersianNumber number={(data?.cost / 10).toLocaleString()} />
</p>
<small className="mr-1 mt-[6px]">تومان</small>
</div>
)}
</div>
</div>
</div>
</div>
);
};
export default CardCart;