Products in cart
- 3 products
-
-
-
-
-
+ {viewAll &&
+ cartItems.map((item) => (
+
+ ))}
+ {!viewAll &&
+ cartItems
+ .slice(0, 3)
+ .map((item) => (
+
+ ))}
+
Total:
- $20088
+ ${total}
+
+
Recommended Products
+
+ {products.slice(0, 4).map((product) => (
+
+ ))}
+
+
);
}
diff --git a/src/components/Cart/CartItem.tsx b/src/components/Cart/CartItem.tsx
index 05b016dd..a6deef70 100644
--- a/src/components/Cart/CartItem.tsx
+++ b/src/components/Cart/CartItem.tsx
@@ -1,16 +1,29 @@
import { useState } from 'react';
+import {
+ updateCartItemQuantity,
+ removeCartItem,
+} from '@/features/Cart/cartSlice';
+import { useAppDispatch } from '@/app/hooks';
interface CartProps {
+ id: number;
price: number;
name: string;
+ quantity: number;
}
-function CartItem({ price, name }: CartProps) {
- const [quantity, setQuantity] = useState(0);
+function CartItem({ id, price, name, quantity }: CartProps) {
+ const dispatch = useAppDispatch();
const [size, setSize] = useState<'M' | 'S' | 'L'>('M');
const handleQuantityChange = (amount: number) => {
- setQuantity((prevQuantity) => Math.max(0, prevQuantity + amount));
+ if (quantity + amount < 1) {
+ dispatch(removeCartItem(id));
+ } else {
+ dispatch(
+ updateCartItemQuantity({ itemId: id, quantity: amount + quantity })
+ );
+ }
};
const handleSize = (newSize: 'M' | 'S' | 'L') => {
@@ -82,7 +95,7 @@ function CartItem({ price, name }: CartProps) {
>
-
-
{quantity}
+
{Math.round(quantity)}