115 lines
3.9 KiB
JavaScript
115 lines
3.9 KiB
JavaScript
"use client";
|
|
import React, { useContext } from "react";
|
|
import { SwiperSlide } from "swiper/react";
|
|
import logo from "../../../public/images/logo.png";
|
|
|
|
import Image from "next/image";
|
|
import PersianNumber from "plugins/PersianNumber";
|
|
import AppContext from "@ctx/AppContext";
|
|
import AddToCart from "../Components/AddToCart/page";
|
|
import Link from "next/link";
|
|
|
|
const CardNormal = ({ data }) => {
|
|
const CTX = useContext(AppContext);
|
|
const cart = CTX.state.cart;
|
|
return (
|
|
<>
|
|
{" "}
|
|
<>
|
|
<Link href={`/products/${data.id}`}>
|
|
<div
|
|
className={` tr03 py-2 overflow-hidden xs:h-[200px] lg:h-[230px] border border-gray-100 ${
|
|
1 == 1 ? "bg-white rounded-xl" : " opacity-70"
|
|
}`}
|
|
// key={index}
|
|
// onClick={() => handleRoutineShiftPlanWithDay(index)}
|
|
>
|
|
{data.hasDiscount && (
|
|
<div className="absolute m-3 ">
|
|
<div className="w-fit rounded-lg bg-red-600 overflow-hidden px-1 ">
|
|
<p className="mb-0 text-[10px] text-white pt-[3px] ">
|
|
<PersianNumber
|
|
number={data.discountPercent}
|
|
style={"!text-[10px]"}
|
|
/>
|
|
<small className="text-[10px] ml-1">%</small>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="w-full h-fit flex justify-center ">
|
|
{!!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] h-[90px] mt-10 ">
|
|
<Image
|
|
src={logo}
|
|
className="xs:!w-[70px] lg:!w-[70px] mx-auto !object-cover opacity-25 mt-5"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="p-3 text-right">
|
|
<p className="mb-0 text-[14px] max-h-[44px] overflow-hidden ">
|
|
{data.persianName}{" "}
|
|
</p>
|
|
|
|
{data.stock <= 3 && (
|
|
<p className="mb-0 text-[11px] text-red-600 font-medium">
|
|
{" "}
|
|
{data.stock}عدد موجود انبار
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</>
|
|
<div className="bg-gray-50 rounded-lg flex ltr p-1 mt-2 border border-gray-100">
|
|
<div className="flex w-full">
|
|
<AddToCart data={data} theme={1} />
|
|
</div>
|
|
|
|
<div className="w-full text-right rounded-full pr-2">
|
|
{data?.hasDiscount ? (
|
|
<>
|
|
<p className="mb-0 font-bold text-sm absolute right-3 opacity-30 mt-[-5px] text-red-600">
|
|
<del>
|
|
<PersianNumber
|
|
number={(data?.cost / 10).toLocaleString()}
|
|
style="!text-[11px]"
|
|
/>
|
|
</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 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>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default CardNormal;
|