diff --git a/frontend/src/components/Cart.js b/frontend/src/components/Cart.js new file mode 100644 index 0000000000000000000000000000000000000000..c941c8770f596887fb801368787b814d9a1c840d --- /dev/null +++ b/frontend/src/components/Cart.js @@ -0,0 +1,49 @@ +import React from 'react'; +import { useCart } from '../contexts/CartContext'; +import '../css/Cart.css' + +function Cart() { + const { cart, removeFromCart, updateQuantity } = useCart(); + + if (!cart.items.length) { + return <div>Your cart is empty.</div>; + } + + const handleQuantityChange = (id, event) => { + updateQuantity(id, parseInt(event.target.value)); + }; + + return ( + <div className="cart-container"> + <h1>Your Shopping Cart</h1> + <div className="cart-container-list"> + {cart.items.map(item => ( + <div key={item.id} className="cart-item"> + <img src={item.ImageURL} alt={item.Name} style={{ width: '100px', height: '100px' }} /> + <div> + <h3>{item.Name}</h3> + <p>{item.Price},-</p> + <p> + Quantity: + <input + type="number" + value={item.quantity} + onChange={e => handleQuantityChange(item.id, e)} + min="1" + max="99" + /> + </p> + <button onClick={() => removeFromCart(item.id)}>Remove from Cart</button> + </div> + </div> + ))} + </div> + <div> + <h3>Total: {cart.items.reduce((total, item) => total + item.quantity * item.Price, 0).toFixed(2)},-</h3> + <button onClick={() => alert('Proceed to Checkout')}>Checkout</button> + </div> + </div> + ); +} + +export default Cart;