From 80fd4ed7cc98394f1509a597b226b324fd5eed0c Mon Sep 17 00:00:00 2001
From: Laktionov Anton <tavres@gmail.com>
Date: Thu, 30 Apr 2026 18:50:22 +0300
Subject: [PATCH] =?UTF-8?q?=D0=A3=D1=80=D0=BE=D0=BA=202=20=D0=B4=D0=B5?=
 =?UTF-8?q?=D0=BB=D0=B0=D0=BB=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx         | 43 +++++++++++++++++++++++++++++--------------
 src/App.module.scss | 12 ++++++++++++
 2 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 6fac84a..fefe748 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,7 +1,9 @@
 import styles from './App.module.scss'
 import SneakersImage from './assets/images/sneakers-image.jpg'
 import { FaRegUser } from 'react-icons/fa'
-import React from 'react'
+import { FaHeart } from "react-icons/fa";
+import { BsCheckSquare } from "react-icons/bs";
+import { useState } from 'react'
 
 function Header() {
 	const handleChange = event => {
@@ -24,26 +26,39 @@ function Header() {
 }
 
 function Product() {
-	function handleClick() {
+    function LikeCounter() {
+        const [likes,setLikes] = useState(0);
+        return (
+            <>
+                <h2>Лайков: {likes}</h2>
+            {likes < 10 && <button onClick={() => setLikes(likes + 1)}>👍 Лайк</button>}
+            {likes > 0 && <button onClick={() => setLikes(0)}>🔄 Сбросить</button> }
+            {likes >= 10 && <h3>Вы достигли лимита!</h3>}
+            <div className={styles.progress}>
+                <div className={styles.value}></div>
+            </div>
+            </>
+        )
+    }
+
+    function handleClick() {
 		console.log('Working!')
 	}
 
     function Counter() {
-        const [title,setTitle] = React.useState('');
-        const [titleValue,setTitleValue] = React.useState({
-            title:'',
-        });
+        const [isLiked,setIsLiked] = useState(false);
         
-        console.log(titleValue);
+        const toggleLike = () => {
+            setIsLiked(!isLiked);
+        }
         
         return (
             <>
-                <input 
-                    value={title}
-                    type="text"
-                    onChange={e => setTitle(e.target.value)}
-                />
-                <button onClick={setTitleValue(title)}>Установить заголовок</button>
+                <BsCheckSquare  
+                    onClick={toggleLike}
+                    fill={isLiked==true ? 'red' : 'grey'}
+                    size={44}
+                     />
             </>
         )
     }
@@ -59,7 +74,7 @@ function Product() {
 				<p className={styles.description}>NIKE</p>
 				<p className={styles.price}>$38.00</p>
 			</div>
-            <Counter />
+            <LikeCounter />
 		</div>
 	)
 }
diff --git a/src/App.module.scss b/src/App.module.scss
index cec9515..965d806 100644
--- a/src/App.module.scss
+++ b/src/App.module.scss
@@ -1,5 +1,17 @@
 @use './assets/styles/variables' as *;
 
+.progress {
+    width: 100%;
+    height: 10px;
+    border: 1px solid black;
+
+}
+.value {
+    width:70%;
+    height: 100%;
+    background-color: green;
+}
+
 .header {
 	display: flex;
 	justify-content: space-between;