121 lines
4.2 KiB
JavaScript
121 lines
4.2 KiB
JavaScript
/* eslint-disable react/prop-types */
|
|
import { useContext, useState } from "react";
|
|
import { CartContext } from "../cartContext";
|
|
import { crossIcon, crossSecond } from "../../assets/SvgIcons/svgIcons";
|
|
|
|
export default function Cart({ showModal, toggle }) {
|
|
const {
|
|
cartItems,
|
|
addToCart,
|
|
removeFromCart,
|
|
removeItem,
|
|
clearCart,
|
|
getCartTotal,
|
|
} = useContext(CartContext);
|
|
|
|
const [checkout, setCheckout] = useState("");
|
|
|
|
const handleCheckOut = () => {
|
|
setCheckout("Your Order has been checked out");
|
|
setTimeout(() => {
|
|
setCheckout("");
|
|
}, 3000);
|
|
};
|
|
|
|
return (
|
|
showModal && (
|
|
<div className="fixed inset-0 left-1/4 bg-white dark:bg-slate-800 gap-8 p-10 text-black dark:text-white font-normal text-sm overflow-x-auto overflow-y-scroll no-scrollbar">
|
|
<div className="flex flex-col gap-y-2 items-start">
|
|
<h1 className="text-lg font-bold">Total: ${getCartTotal()}</h1>
|
|
<button
|
|
className="px-4 py-2 bg-gray-500 text-white text-xs font-bold rounded hover:bg-gray-600 focus:outline-none"
|
|
onClick={handleCheckOut}
|
|
>
|
|
Checkout
|
|
</button>
|
|
<div className="flex items-center justify-center w-full">
|
|
{cartItems?.length > 0 ? (
|
|
<div className="flex flex-col justify-between items-center">
|
|
{checkout && (
|
|
<p className="mt-4 text-green-500 font-bold">{checkout}</p>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<h1 className="text-lg font-bold">Your cart is empty</h1>
|
|
)}
|
|
</div>
|
|
<h1 className="flex text-4xl font-bold items-center justify-center w-full h-full">
|
|
Cart Details
|
|
</h1>
|
|
|
|
<div className="flex flex-col absolute right-5 top-0 gap-y-20">
|
|
<div className="ml-5 top-5">
|
|
<button className="px-4 py-2 text-xl mt-4" onClick={toggle}>
|
|
{crossIcon}
|
|
</button>
|
|
</div>
|
|
<div className="mr-6">
|
|
<button
|
|
className="px-4 py-2 bg-gray-500 text-white text-xs font-bold rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-700 "
|
|
onClick={() => {
|
|
clearCart();
|
|
}}
|
|
>
|
|
Clear cart
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col items-start gap-4 w-full mt-8">
|
|
{cartItems?.map((item) => (
|
|
<div
|
|
className="flex justify-between items-start rounded-lg border border-white p-4 min-w-full"
|
|
key={item?.id}
|
|
>
|
|
<div className="flex gap-4">
|
|
<img
|
|
src={item?.image}
|
|
alt={item?.title}
|
|
className="rounded-md h-24 w-24"
|
|
/>
|
|
<div className="flex flex-col w-96">
|
|
<h1 className="text-lg font-bold w-full">{item?.title}</h1>
|
|
<p className="text-slate-300">${item?.price}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-4 items-center ml-8">
|
|
<button
|
|
className="px-3 py-1 bg-gray-500 text-white text-l font-bold rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-700"
|
|
onClick={() => {
|
|
removeFromCart(item);
|
|
}}
|
|
>
|
|
-
|
|
</button>
|
|
<p>{item?.quantity}</p>
|
|
<button
|
|
className="px-3 py-1 bg-gray-500 text-white text-l font-bold rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-700"
|
|
onClick={() => {
|
|
addToCart(item);
|
|
}}
|
|
>
|
|
+
|
|
</button>
|
|
|
|
<button
|
|
className="px-3 py-1 text-red-600"
|
|
onClick={() => {
|
|
removeItem(item);
|
|
}}
|
|
>
|
|
{crossSecond}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
);
|
|
}
|