From 8a8a17f44dabdb73e34d48f14898783d3719015f Mon Sep 17 00:00:00 2001
From: Laktionov Anton <tavres@gmail.com>
Date: Tue, 5 May 2026 20:42:01 +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=BF=D1=80=D0=B0=D0=BA=D1=82=D0=B8=D0=BA=D1=83=20=D1=81=20?=
 =?UTF-8?q?=D0=BA=D0=B0=D1=80=D1=82=D0=BE=D1=87=D0=BA=D0=B0=D0=BC=D0=B8=20?=
 =?UTF-8?q?=D0=BF=D1=80=D0=BE=D0=B4=D1=83=D0=BA=D1=82=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx | 39 ++++++++++++++++++++++++++++++++-------
 1 file changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 61f38a0..5772f98 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,4 +1,5 @@
 import styles from './styles/App.module.scss'
+import React from 'react'
 
 function Person({ name, age }) {
     return (
@@ -9,16 +10,40 @@ function Person({ name, age }) {
     )
 }
 
+function ProductCard({title, price, background}) {
+    return (
+        <div style={{
+                backgroundColor: background,
+                border: '1px solid gray',
+                padding: '10px',
+                borderRadius: '10px',
+                width: '250px',
+                marginTop: '15px',
+            }}>
+            <h3>{title}</h3>
+            <p>Цена: {price}</p>
+        </div>
+    )
+}
+
 function App() {
-    const options = {title:'Меню', width: 100, height: 200}
-    let {width, title, height} = options;
-    console.log(title);
-    console.log(width);
-    console.log(height);
+    const [price1, setPrice1] = React.useState(1000);
+    const [bgColor2, setBgColor2] = React.useState('#ffe6e6');
+    
+    const changePrice1 = () => setPrice1(cur => cur + 100);
+    const changeBgColor2 = () => {
+        const colors = ['#ffe6e6','#00e6e6','#ffefe6','#00f6f6'];
+        const random = colors[Math.floor(Math.random() * colors.length)];
+        setBgColor2(random);
+    }
+    
 	return (
 		<>
-            <Person name="Alex" age={28} />
-            <Person name="Bob" age={35} />
+            <h2>Практика Props</h2>
+            <button onClick={changePrice1}>Изменить цену товара 1</button>
+            <button onClick={changeBgColor2}>Изменить цвет товара 2</button>
+            <ProductCard title="Товар 1" price={price1} background="#ffffff" />
+            <ProductCard title="Товар 2" price={500} background={bgColor2} />
 		</>
 	)
 }