Добавили обработчик событий по клику на карточку товара, создали компонент Header, установили библиотеку react-icons

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.5.0"
       },
       "devDependencies": {
         "@eslint/js": "^9.25.0",
@@ -2461,6 +2462,15 @@
         "react": "^19.1.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "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",

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.5.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",

src/App.jsx

@@ -1,14 +1,26 @@
 import styles from './App.module.css'
 import SneakersImage from './assets/images/sneakers-image.jpg'
 
+function Header() {
+	return (
+		<header className={styles.header}>
+			<h2>Logo</h2>
+		</header>
+	)
+}
+
 function Product() {
+	function handleClick() {
+		console.log('Working!')
+	}
+
 	return (
 		<div className={styles.product}>
 			<img src={SneakersImage} alt='' />
 			<div className={styles.content}>
 				<div className={styles.title}>
 					<h4>Sneakers Red & White 2025</h4>
-					<button>+</button>
+					<button onClick={event => handleClick(event)}>+</button>
 				</div>
 				<p className={styles.description}>NIKE</p>
 				<p className={styles.price}>$38.00</p>
@@ -20,6 +32,9 @@ function Product() {
 function App() {
 	return (
 		<>
+			<div className={styles.container}>
+				<Header />
+			</div>
 			<div className={styles.container}>
 				<ul className={styles.list}>
 					<li>

src/App.module.css

@@ -1,3 +1,7 @@
+.header {
+	display: flex;
+}
+
 .container {
 	max-width: 1220px;
 	margin: 0 auto;
@@ -6,6 +10,7 @@
 .list {
 	display: flex;
 	justify-content: space-between;
+	flex-wrap: wrap;
 	border-radius: 10px;
 	margin-top: 100px; /* временно */
 	padding: 20px;