bonsai-web/plugins/bottomSheet/BottomSheetCart.jsx

60 lines
1.7 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 } from "react";
import { BottomSheet } from "react-spring-bottom-sheet";
const BottomSheetCart = (props) => {
const CTX = useContext(AppContext);
const cart = CTX.state.cart;
return (
<BottomSheet
open={CTX.state.bottomSheetCartOpen}
onDismiss={() => CTX.setBottomSheetCartOpen(false)}
className={"z-50 relative"}
>
<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">
{" "}
ثبت خرید
</button>
</Link>
</div>
</BottomSheet>
);
};
export default BottomSheetCart;