fdsf

mate-academy · Oct 1, 2024 · ee60d54 · ee60d54
1 parent dfc73b8
commit ee60d54
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 4 deletions.
diff --git a/src/App.scss b/src/App.scss
@@ -1,8 +1,22 @@
+.cart__counter {
+  display: flex;
+  column-gap: 8px;
+
+  &-text {
+    margin: 0;
+    color: rgb(0, 0, 0);
+    font-family: Mont, sans-serif;
+    font-size: 14px;
+    font-weight: 500;
+  }
+}
+
 @media screen and (min-width: 640px) {
   .qwerty {
     display: grid;
     grid-template-columns: repeat(12, 1fr);
     column-gap: 16px;
+    align-items: center;
 
     @media screen and (min-width: 1200px) {
       grid-template-columns: repeat(24, 1fr);
@@ -85,6 +99,8 @@
 }
 
 .cart__card {
+  display: flex;
+  flex-direction: column;
   padding: 16px;
   box-sizing: border-box;
   border: 1px solid rgb(226, 230, 233);
@@ -93,6 +109,21 @@
 
   margin-bottom: 10px;
 
+  @media screen and (min-width: 640px) {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  &--second-div {
+    @media screen and (min-width: 640px) {
+      column-gap: 8px;
+    }
+
+    @media screen and (min-width: 640px) {
+      column-gap: 16px;
+    }
+  }
+
   &-img {
     height: 76px;
     width: 66px;

diff --git a/src/pages/CartItem.tsx b/src/pages/CartItem.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useLocalStorage } from '../LocaleStorage';
 import { Products } from '../types/products';
 import { useLocation, useNavigate } from 'react-router-dom';
@@ -7,12 +7,13 @@ export const CartItem = () => {
   const [cart, setCart] = useLocalStorage<Products[]>('cart', []);
   const navigate = useNavigate();
   const location = useLocation();
+  const [quantities, setQuantities] = useState(cart.map(() => 1));
 
   const sumCart = () => {
     let sum = 0;
 
     for (let i = 0; i < cart.length; i++) {
-      sum += cart[i].price;
+      sum += cart[i].price * quantities[i]; // Зміна тут: множимо ціну на кількість
     }
 
     return sum;
@@ -24,6 +25,24 @@ export const CartItem = () => {
     setCart(updatedCart);
   };
 
+  const handleIncrease = (index: number) => {
+    const newQuantities = [...quantities];
+
+    newQuantities[index] += 1;
+
+    setQuantities(newQuantities);
+  };
+
+  const handleDecrease = (index: number) => {
+    const newQuantities = [...quantities];
+
+    if (newQuantities[index] > 1) {
+      newQuantities[index] -= 1;
+    }
+
+    setQuantities(newQuantities);
+  };
+
   return (
     <>
       <div className="details__back">
@@ -46,7 +65,7 @@ export const CartItem = () => {
       <h1>Cart</h1>
       <p>{cart.length} items</p>
 
-      {cart.map(el => (
+      {cart.map((el, index) => (
         <div key={el.id} className="cart__card">
           <div
             style={{ display: 'flex', alignItems: 'center', columnGap: '16px' }}
@@ -59,7 +78,34 @@ export const CartItem = () => {
             <img className="cart__card-img" src={el.image} alt="" />
             <p>{el.name}</p>
           </div>
-          <p className="cart__card-price">${el.price}</p>
+
+          <div
+            className="cart__card--second-div"
+            style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}
+          >
+            <div className="cart__counter">
+              <button
+                style={{ cursor: 'pointer' }}
+                onClick={() => handleIncrease(index)}
+                className="cart__counter-text"
+              >
+                +
+              </button>
+              <p className="cart__counter-text">{quantities[index]}</p>
+              <button
+                style={{ cursor: 'pointer' }}
+                onClick={() => handleDecrease(index)}
+                className="cart__counter-text"
+              >
+                -
+              </button>
+            </div>
+            <p className="cart__card-price">${el.price * quantities[index]}</p>
+          </div>
         </div>
       ))}