From e23d11255150ad3592dfcb40f4a4704b71b6e254 Mon Sep 17 00:00:00 2001
From: Laktionov Anton <tavres@gmail.com>
Date: Tue, 28 Apr 2026 20:25:15 +0300
Subject: [PATCH] =?UTF-8?q?=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=D0=B8=20?=
 =?UTF-8?q?=D0=B7=D0=B0=D0=B3=D0=BE=D0=BB=D0=BE=D0=B2=D0=BE=D0=BA=20=D0=B8?=
 =?UTF-8?q?=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=D0=B8=20=D1=81?=
 =?UTF-8?q?=D0=BE=D0=B1=D1=8B=D1=82=D0=B8=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json  | 12 ++++++++-
 package.json       |  5 ++--
 src/App.jsx        | 38 ++++++++++++++++++++++++++--
 src/App.module.css | 62 +++++++++++++++++++++++++++++++++++++++++++++-
 4 files changed, 111 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b4904ee..987c899 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "react": "^19.1.0",
-        "react-dom": "^19.1.0"
+        "react-dom": "^19.1.0",
+        "react-icons": "^5.6.0"
       },
       "devDependencies": {
         "@eslint/js": "^9.25.0",
@@ -2461,6 +2462,15 @@
         "react": "^19.1.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.6.0.tgz",
+      "integrity": "sha512-RH93p5ki6LfOiIt0UtDyNg/cee+HLVR6cHHtW3wALfo+eOHTp8RnU2kRkI6E+H19zMIs03DyxUG/GfZMOGvmiA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
diff --git a/package.json b/package.json
index 151176e..b4201d7 100644
--- a/package.json
+++ b/package.json
@@ -4,14 +4,15 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite", 
+    "dev": "vite",
     "build": "vite build",
     "lint": "eslint .",
     "preview": "vite preview"
   },
   "dependencies": {
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "react-icons": "^5.6.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",
diff --git a/src/App.jsx b/src/App.jsx
index 0c6f935..406560d 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,14 +1,47 @@
 import styles from './App.module.css'
 import SneakersImage from './assets/images/sneakers-image.jpg'
+import { FaRegUser } from 'react-icons/fa'
+
+function handleClick(i) {
+    console.log(i);
+}
+
+function Header() {
+    const handleChange = event => {
+        const newValue = event.target.value;
+        console.log(`Новое значение ${newValue}`);
+    }
+    return (
+		<header className={styles.header}>
+			<div>
+				<h2>Store</h2>
+				<input type='text	' placeholder='Search...' onChange={handleChange} />
+			</div>
+			<div>
+				<FaRegUser size={24} color='#3258e3' />
+				<button>Profile</button>
+			</div>
+		</header>
+	)
+}
 
 function Product() {
+    const handlerMouseEnter = event => {
+        const img = event.target;
+        img.style.border = '5px solid yellow';
+    }
+    const handlerMouseOut = event => {
+        const img = event.target;
+        img.style.border = '';
+        console.log(event);
+    }
 	return (
 		<div className={styles.product}>
-			<img src={SneakersImage} alt='' />
+			<img src={SneakersImage} alt='' onMouseEnter={handlerMouseEnter} onMouseOut={handlerMouseOut} />
 			<div className={styles.content}>
 				<div className={styles.title}>
 					<h4>Sneakers Red & White 2025</h4>
-					<button>+</button>
+					<button onClick={() => handleClick(0)} onMouseEnter={handlerMouseEnter} onMouseOut={handlerMouseOut}>+</button>
 				</div>
 				<p className={styles.description}>NIKE</p>
 				<p className={styles.price}>$38.00</p>
@@ -21,6 +54,7 @@ function App() {
 	return (
 		<>
 			<div className={styles.container}>
+			<Header />
 				<ul className={styles.list}>
 					<li>
 						<Product />
diff --git a/src/App.module.css b/src/App.module.css
index c1d32ba..5372516 100644
--- a/src/App.module.css
+++ b/src/App.module.css
@@ -1,3 +1,63 @@
+@use './assets/styles/variables' as *;
+
+.header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+
+	padding: 20px;
+	background-color: white;
+
+	border-bottom-left-radius: 10px;
+	border-bottom-right-radius: 10px;
+
+	div {
+		&:first-child {
+			display: flex;
+			align-items: center;
+			gap: 20px;
+
+			h2 {
+				color: $primary-color;
+			}
+
+			input {
+				border-radius: 5px;
+				outline: none;
+				font-size: 16px;
+				border: 1px solid gainsboro;
+				padding: 5px 10px;
+
+				&:focus {
+					border: 1px solid $primary-color;
+				}
+			}
+		}
+
+		&:last-child {
+			display: flex;
+			align-items: center;
+			gap: 10px;
+
+			button {
+				outline: 0;
+				border: 0;
+				border-radius: 5px;
+				padding: 5px 15px;
+				font-size: 16px;
+				background-color: $primary-color;
+				color: $white-color;
+				font-weight: 600;
+				cursor: pointer;
+
+				&:hover {
+					background-color: $seconday-color;
+				}
+			}
+		}
+	}
+}
+
 .container {
 	max-width: 1220px;
 	margin: 0 auto;
@@ -40,7 +100,7 @@
 		background-color: black;
 		color: white;
 		border: 0;
-		border-radius: 100%;
+		border-radius: 50%;
 		outline: 0;
 
 		font-size: 20px;