104 lines
3.2 KiB
JavaScript
104 lines
3.2 KiB
JavaScript
"use client";
|
|
import CardCart from "@comp/Cards/CardCart/page";
|
|
import AppContext from "@ctx/AppContext";
|
|
import Link from "next/link";
|
|
import PersianNumber from "plugins/PersianNumber";
|
|
import { useContext, useState } from "react";
|
|
|
|
const CartNavbar = ({ isScrolled }) => {
|
|
const CTX = useContext(AppContext);
|
|
const cart = CTX.state.cart;
|
|
const [smallBasket, setSmallBasket] = useState(false);
|
|
|
|
return (
|
|
<div
|
|
className={` ${
|
|
isScrolled
|
|
? " fixed w-fit !z-[100] mt-[-40px] left-0 ml-[100px] "
|
|
: "mr-2"
|
|
}`}
|
|
>
|
|
<div
|
|
className={`bg-secondary-600 rounded-xl text-sm flex cursor-pointer px-5 ${
|
|
isScrolled ? "p-1" : "py-2"
|
|
} `}
|
|
onClick={() => setSmallBasket(!smallBasket)}
|
|
>
|
|
<p className="mb-0 text-white">سبد خرید</p>
|
|
</div>
|
|
|
|
<div className="flex justify-end">
|
|
<div
|
|
className={`absolute mr-[3px] ${
|
|
isScrolled ? "mt-[-40px]" : "mt-[-50px]"
|
|
}`}
|
|
>
|
|
<div
|
|
className={`bg-white border-[1px] rounded-full text-center ${
|
|
isScrolled ? "w-[20px] h-[20px]" : "w-[25px] h-[25px] "
|
|
}`}
|
|
>
|
|
<PersianNumber
|
|
number={cart?.length}
|
|
style={` ${
|
|
isScrolled ? "!text-[10px] relative top-[-3px]" : "!text-sm"
|
|
}`}
|
|
/>{" "}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{smallBasket && (
|
|
<div
|
|
className={`relative !z-[100] tr03 ${
|
|
smallBasket ? "opacity-100" : "opacity-0"
|
|
} `}
|
|
>
|
|
<div className="absolute w-[400px] bg-white border-[3px] border-gray-100 rounded-xl mt-2 max-h-[450px] overflow-auto mr-[-310px] scroll-1">
|
|
<div className="text-center p-3">
|
|
<p className="mb-0 text-sm pb-3">
|
|
<PersianNumber
|
|
number={cart?.length}
|
|
style="text-xl font-bold text-base font-bold mx-2 !text-primary-500"
|
|
/>
|
|
محصول موجود در سبد
|
|
</p>
|
|
|
|
{/* <div className="w-5/12 mx-auto h-[1px] bg-gray-200 my-3"></div> */}
|
|
<div>
|
|
{cart.map((e, index) => (
|
|
<CardCart key={index} data={e} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-full p-3 ">
|
|
{/* <div className="">
|
|
<p className="mb-0 text-sm p-3">
|
|
جمع کل :
|
|
<PersianNumber
|
|
number={2546385}
|
|
style="text-lg mr-2 font-bold text-gray-500"
|
|
/>
|
|
<small className="mr-1 mt-[6px]">تومان</small>
|
|
</p>
|
|
</div> */}
|
|
<Link href={"/cart"}>
|
|
<button
|
|
className="btn btn-primary text-sm w-full py-3 rounded-3xl"
|
|
onClick={() => CTX.fetchOrderBagCheck()}
|
|
>
|
|
{" "}
|
|
ثبت خرید
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CartNavbar;
|