enhanced cart page

Mujtabaa07 · Feb 8, 2025 · f9471d8 · f9471d8
1 parent 9e9ea72
commit f9471d8
Showing 1 changed file with 80 additions and 44 deletions.
diff --git a/src/Pages/cart.js b/src/Pages/cart.js
@@ -1,24 +1,26 @@
 import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { removeFromCart, updateQuantity, clearCart } from '../Store/cartSlice'; // Import clearCart action
+import { removeFromCart, updateQuantity, clearCart } from '../Store/cartSlice';
 import styled from 'styled-components';
 import { motion } from 'framer-motion';
 import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 
 const CartContainer = styled.div`
   padding: 2rem;
+  max-width: 1200px;
+  margin: 0 auto;
 `;
 
 const CartItem = styled(motion.div)`
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 1rem;
-  margin-bottom: 1rem;
-  background-color: white;
+  margin-bottom: 1.5rem;
+  background-color: #fff;
   border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 `;
 
 const ItemInfo = styled.div`
@@ -27,33 +29,52 @@ const ItemInfo = styled.div`
 `;
 
 const ItemImage = styled.img`
-  width: 50px;
-  height: 50px;
+  width: 70px;
+  height: 70px;
   object-fit: cover;
   margin-right: 1rem;
-  border-radius: 4px;
+  border-radius: 8px;
 `;
 
 const ItemName = styled.span`
   font-weight: bold;
+  font-size: 1.1rem;
+  color: #333;
 `;
 
 const ItemPrice = styled.span`
   margin-left: 1rem;
+  font-size: 1rem;
+  color: #888;
 `;
 
 const QuantityInput = styled.input`
-  width: 50px;
+  width: 60px;
+  height: 30px;
   text-align: center;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  margin-right: 1rem;
+  font-size: 1rem;
+  padding: 5px;
+  &:focus {
+    outline: none;
+    border-color: #ff5722;
+  }
 `;
 
 const RemoveButton = styled(motion.button)`
-  background:rgb(147, 82, 77);
+  background-color: #e74c3c;
   color: white;
   border: none;
   padding: 0.5rem;
   border-radius: 6px;
   cursor: pointer;
+  font-size: 0.9rem;
+  transition: background-color 0.3s ease;
+  &:hover {
+    background-color: #c0392b;
+  }
 `;
 
 const SummaryTable = styled.table`
@@ -67,19 +88,26 @@ const SummaryRow = styled.tr`
 `;
 
 const SummaryCell = styled.td`
-  padding: 0.5rem;
+  padding: 0.8rem;
   text-align: right;
+  font-size: 1.1rem;
+  color: #333;
 `;
 
 const ProceedButton = styled(motion.button)`
-  background:rgb(171, 73, 28);
+  background: #7c2214;
   color: white;
   border: none;
-  padding: 0.5rem;
+  padding: 1rem;
   border-radius: 4px;
   cursor: pointer;
   margin-top: 1rem;
-  width: 100%; 
+  width: 100%;
+  font-size: 1.2rem;
+  transition: background-color 0.3s ease;
+  &:hover {
+    background-color: #5e1105;
+  }
 `;
 
 function Cart() {
@@ -92,55 +120,63 @@ function Cart() {
   };
 
   const handleUpdateQuantity = (productId, quantity) => {
+    if (quantity <= 0) {
+      toast.warn('Quantity must be greater than 0');
+      return;
+    }
     dispatch(updateQuantity({ productId, quantity: parseInt(quantity) }));
-    toast.info('Cart updated!'); 
+    toast.info('Cart updated!');
   };
 
   const totalPrice = cartItems.reduce(
     (total, item) => total + item.price * item.quantity,
     0
   );
 
-  const SGST = totalPrice * 0.09; // SGST is 9%
-  const CGST = totalPrice * 0.09; // CGST is 9%
+  const SGST = totalPrice * 0.09;
+  const CGST = totalPrice * 0.09;
   const finalPrice = totalPrice + SGST + CGST;
 
   const handleProceedToPayment = () => {
     alert('Payment is processing...');
     dispatch(clearCart());
-    alert('Thank you!');
+    toast.success('Thank you for your purchase!');
   };
 
   return (
     <CartContainer>
       <h1>Your Cart</h1>
-      {cartItems.map((item) => (
-        <CartItem
-          key={item.id}
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          exit={{ opacity: 0, y: 20 }}
-        >
-          <ItemInfo>
-            <ItemImage src={item.image} alt={item.name} />
-            <ItemName>{item.name}</ItemName>
-            <ItemPrice>${item.price.toFixed(2)}</ItemPrice>
-          </ItemInfo>
-          <QuantityInput
-            type="number"
-            min="1"
-            value={item.quantity}
-            onChange={(e) => handleUpdateQuantity(item.id, e.target.value)}
-          />
-          <RemoveButton
-            whileHover={{ scale: 1.05 }}
-            whileTap={{ scale: 0.95 }}
-            onClick={() => handleRemoveFromCart(item.id)}
+      {cartItems.length === 0 ? (
+        <p>Your cart is empty. Please add some items!</p>
+      ) : (
+        cartItems.map((item) => (
+          <CartItem
+            key={item.id}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 20 }}
           >
-            Remove
-          </RemoveButton>
-        </CartItem>
-      ))}
+            <ItemInfo>
+              <ItemImage src={item.image} alt={item.name} />
+              <ItemName>{item.name}</ItemName>
+              <ItemPrice>${item.price.toFixed(2)}</ItemPrice>
+            </ItemInfo>
+            <QuantityInput
+              type="number"
+              min="1"
+              value={item.quantity}
+              onChange={(e) => handleUpdateQuantity(item.id, e.target.value)}
+            />
+            <RemoveButton
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+              onClick={() => handleRemoveFromCart(item.id)}
+            >
+              Remove
+            </RemoveButton>
+          </CartItem>
+        ))
+      )}
       <SummaryTable>
         <tbody>
           <SummaryRow>
@@ -172,4 +208,4 @@ function Cart() {
   );
 }
 
-export default Cart;
+export default Cart;