101 lines
3.6 KiB
JavaScript
101 lines
3.6 KiB
JavaScript
"use client";
|
|
|
|
import AppContext from "@ctx/AppContext";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import PersianNumber from "plugins/PersianNumber";
|
|
import { useContext } from "react";
|
|
import logo from "../../../public/images/logo.png";
|
|
import AddToCart from "../Components/AddToCart/page";
|
|
import hyphenateString from "plugins/HyphenateString/page";
|
|
|
|
const CardCategoriesMobile = ({ data }) => {
|
|
const CTX = useContext(AppContext);
|
|
const cart = CTX.state.cart;
|
|
const hyphenatedName = hyphenateString(data.persianName);
|
|
|
|
return (
|
|
<div className="group border-t-[1px] border-gray-200 w-full hover:bg-white z-40 tr03 flex rtl pt-2 px-3">
|
|
<Link href={`/products/${data.id}/${hyphenatedName}`}>
|
|
<div className=" h-fit">
|
|
{!!data.mainImage ? (
|
|
<Image
|
|
src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${data?.mainImage}`}
|
|
width={200}
|
|
height={200}
|
|
className="xs:!w-[110px] lg:!w-[130px] mx-auto "
|
|
alt={`${data.persianName} - ${data.englishName}`}
|
|
/>
|
|
) : (
|
|
<div className="xs:!w-[85px] lg:!w-[85px] ">
|
|
<Image
|
|
src={logo}
|
|
className="xs:!w-[70px] lg:!w-[70px] mx-auto opacity-25 mt-5"
|
|
alt="وسمه"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Link>
|
|
|
|
<div className="w-full p-3 text-right">
|
|
{" "}
|
|
<Link href={`/products/${data.id}/${hyphenatedName}`}>
|
|
<p className="mb-0 xs:text-[12px] lg:text-[11px] xl:text-[15px] max-h-[50px] tr03 ">
|
|
{data?.persianName}
|
|
</p>
|
|
</Link>
|
|
{data.stock <= 3 && data.stock !== 0 && (
|
|
<p className="mb-0 text-[11px] text-red-600 font-medium">
|
|
{data.stock} عدد موجود انبار
|
|
</p>
|
|
)}
|
|
<div className="flex w-full pt-2 mt-2 rounded-full ltr">
|
|
<AddToCart data={data} theme={1} />{" "}
|
|
<div className="w-full text-right rounded-lg">
|
|
{data?.hasDiscount ? (
|
|
<div className="flex justify-end">
|
|
<div className="mb-0 font-bold text-sm absolute mt-[-7px] ml-[20px] text-red-600 flex rtl">
|
|
<del>
|
|
<PersianNumber
|
|
number={(data?.cost / 10).toLocaleString()}
|
|
style={"text-[13px] opacity-40 "}
|
|
/>
|
|
</del>
|
|
|
|
<span className="bg-red-500 mb-0 px-1 text-[9px] text-white rounded-full mx-2 h-fit ">
|
|
<PersianNumber
|
|
number={data?.discountPercent}
|
|
style={"text-white !text-[10px] mr-1 "}
|
|
/>
|
|
%
|
|
</span>
|
|
</div>
|
|
<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 text-lg font-bold">
|
|
<PersianNumber number={(data?.cost / 10).toLocaleString()} />
|
|
</p>
|
|
<small className="mr-1 mt-[6px]">تومان</small>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CardCategoriesMobile;
|