From c5760f27b47dc3886ae98c9d040e8171ef5cdc94 Mon Sep 17 00:00:00 2001
From: isHardCoded <ishardcoded@gmail.com>
Date: Wed, 25 Jun 2025 15:40:12 +0300
Subject: [PATCH] =?UTF-8?q?=D0=A1=D0=BE=D0=B7=D0=B4=D0=B0=D0=BB=D0=B8=20pr?=
 =?UTF-8?q?ops=20=D0=B4=D0=BB=D1=8F=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD?=
 =?UTF-8?q?=D0=B5=D0=BD=D1=82=D0=B0=20Products,=20=D0=BE=D1=82=D0=BC=D0=B0?=
 =?UTF-8?q?=D0=BF=D0=BF=D0=B8=D0=BB=D0=B8=20=D0=BF=D0=BE=D0=BB=D1=83=D1=87?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=BD=D1=8B=D0=B5=20=D1=82=D0=BE=D0=B2=D0=B0=D1=80?=
 =?UTF-8?q?=D1=8B=20=D0=BD=D0=B0=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8?=
 =?UTF-8?q?=D1=86=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx | 27 ++++++++++-----------------
 1 file changed, 10 insertions(+), 17 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 764350f..a5e4652 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,5 +1,4 @@
 import styles from './App.module.scss'
-import SneakersImage from './assets/images/sneakers-image.jpg'
 import { FaRegUser } from 'react-icons/fa'
 import React from 'react'
 
@@ -23,7 +22,7 @@ function Header() {
 	)
 }
 
-function Product() {
+function Product({ name, description, price, imageUrl }) {
 	const [isLiked, setIsLiked] = React.useState(false)
 
 	const toggleLike = () => {
@@ -36,10 +35,10 @@ function Product() {
 
 	return (
 		<div className={styles.product}>
-			<img src={SneakersImage} alt='' />
+			<img src={imageUrl} alt='' />
 			<div className={styles.content}>
 				<div className={styles.title}>
-					<h4>Sneakers Red & White 2025</h4>
+					<h4>{name}</h4>
 					<div className={styles.actions}>
 						<button
 							className={styles.likeButton}
@@ -60,8 +59,8 @@ function Product() {
 						<button onClick={handleAddClick}>+</button>
 					</div>
 				</div>
-				<p className={styles.description}>NIKE</p>
-				<p className={styles.price}>$38.00</p>
+				<p className={styles.description}>{description}</p>
+				<p className={styles.price}>${price}</p>
 			</div>
 		</div>
 	)
@@ -80,8 +79,6 @@ function App() {
 		getProducts()
 	}, [])
 
-	console.log(products)
-
 	return (
 		<>
 			<div className={styles.container}>
@@ -89,15 +86,11 @@ function App() {
 			</div>
 			<div className={styles.container}>
 				<ul className={styles.list}>
-					<li>
-						<Product />
-					</li>
-					<li>
-						<Product />
-					</li>
-					<li>
-						<Product />
-					</li>
+					{products.map(product => (
+						<li>
+							<Product {...product} />
+						</li>
+					))}
 				</ul>
 			</div>
 		</>