Урок 2 делали

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 [isLiked,setIsLiked] = useState(false);
-        const [titleValue,setTitleValue] = React.useState({
-            title:'',
-        });
         
-        console.log(titleValue);
+        const toggleLike = () => {
+            setIsLiked(!isLiked);
+        }
         
         return (
             <>
-                <input 
+                <BsCheckSquare  
-                    value={title}
+                    onClick={toggleLike}
-                    type="text"
+                    fill={isLiked==true ? 'red' : 'grey'}
-                    onChange={e => setTitle(e.target.value)}
+                    size={44}
-                />
+                     />
-                <button onClick={setTitleValue(title)}>Установить заголовок</button>
             </>
         )
     }
@@ -59,7 +74,7 @@ function Product() {
 				<p className={styles.description}>NIKE</p>
 				<p className={styles.price}>$38.00</p>
 			</div>
-            <Counter />
+            <LikeCounter />
 		</div>
 	)
 }

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;