From b8e88a4866e8ef3ea26be31babda15a0225aa3b3 Mon Sep 17 00:00:00 2001
From: isHardCoded <ishardcoded@gmail.com>
Date: Wed, 18 Jun 2025 11:45:47 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB?=
 =?UTF-8?q?=D0=B8=20=D0=B2=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5?=
 =?UTF-8?q?=D0=BD=D1=82=20Product=20=D0=B8=D0=BA=D0=BE=D0=BD=D0=BA=D1=83?=
 =?UTF-8?q?=20=D1=81=D0=B5=D1=80=D0=B4=D1=86=D0=B0=20=D0=B8=20=D1=81=D0=BE?=
 =?UTF-8?q?=D0=B7=D0=B4=D0=B0=D0=BB=D0=B8=20=D1=81=D0=BE=D1=81=D1=82=D0=BE?=
 =?UTF-8?q?=D1=8F=D0=BD=D0=B8=D0=B5=20=D0=B4=D0=BB=D1=8F=20=D0=BD=D0=B5?=
 =?UTF-8?q?=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx         | 29 +++++++++++++++++++++++++++--
 src/App.module.scss | 30 ++++++++++++++++++------------
 2 files changed, 45 insertions(+), 14 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 58dacbd..c144e38 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,6 +1,7 @@
 import styles from './App.module.scss'
 import SneakersImage from './assets/images/sneakers-image.jpg'
 import { FaRegUser } from 'react-icons/fa'
+import React from 'react'
 
 function Header() {
 	const handleChange = event => {
@@ -23,7 +24,13 @@ function Header() {
 }
 
 function Product() {
-	function handleClick() {
+	const [isLiked, setIsLiked] = React.useState(false)
+
+	const toggleLike = () => {
+		setIsLiked(!isLiked)
+	}
+
+	function handleAddClick() {
 		console.log('Working!')
 	}
 
@@ -33,7 +40,25 @@ function Product() {
 			<div className={styles.content}>
 				<div className={styles.title}>
 					<h4>Sneakers Red & White 2025</h4>
-					<button onClick={event => handleClick(event)}>+</button>
+					<div className={styles.actions}>
+						<button
+							className={styles.likeButton}
+							onClick={toggleLike}
+							aria-label={isLiked ? 'Убрать лайк' : 'Добавить лайк'}
+						>
+							<svg
+								width='18'
+								height='18'
+								viewBox='0 0 24 24'
+								fill={isLiked ? 'red' : 'none'}
+								stroke={isLiked ? 'red' : 'currentColor'}
+								strokeWidth='1.5'
+							>
+								<path d='M12 21.35L10.55 20.03C5.4 15.36 2 12.28 2 8.5C2 5.42 4.42 3 7.5 3C9.24 3 10.91 3.81 12 5.09C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.42 22 8.5C22 12.28 18.6 15.36 13.45 20.04L12 21.35Z' />
+							</svg>
+						</button>
+						<button onClick={handleAddClick}>+</button>
+					</div>
 				</div>
 				<p className={styles.description}>NIKE</p>
 				<p className={styles.price}>$38.00</p>
diff --git a/src/App.module.scss b/src/App.module.scss
index cec9515..94683dc 100644
--- a/src/App.module.scss
+++ b/src/App.module.scss
@@ -97,21 +97,27 @@
 		font-size: 18px;
 	}
 
-	button {
-		border: 1px solid $primary-color;
-		background-color: $white-color;
-		color: $primary-color;
-		border-radius: 5px;
-		outline: 0;
+	.actions {
+		display: flex;
+		align-items: center;
+		gap: 5px;
 
-		font-size: 20px;
-		padding: 5px 10px;
+		button {
+			border: 1px solid $primary-color;
+			background-color: $white-color;
+			color: $primary-color;
+			border-radius: 5px;
+			outline: 0;
 
-		cursor: pointer;
+			font-size: 20px;
+			padding: 5px 10px;
 
-		&:hover {
-			background-color: $seconday-color;
-			color: $white-color;
+			cursor: pointer;
+
+			&:hover {
+				background-color: $seconday-color;
+				color: $white-color;
+			}
 		}
 	}
 }