From 6ac5d9220e9adffd9f90947b9d6abcca916e5272 Mon Sep 17 00:00:00 2001
From: Laktionov Anton <tavres@gmail.com>
Date: Thu, 21 May 2026 19:04:55 +0300
Subject: [PATCH] =?UTF-8?q?=D0=AF=20=D1=83=D0=B6=D0=B5=20=D0=BD=D0=B5=20?=
 =?UTF-8?q?=D0=BF=D0=BE=D0=BC=D0=BD=D1=8E=20=D1=87=D1=82=D0=BE=20=D1=82?=
 =?UTF-8?q?=D0=B0=D0=BC=20=D0=B1=D1=8B=D0=BB=D0=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx         | 96 +++++++++++++++++++++++++++++----------------
 src/App.module.scss |  6 +--
 2 files changed, 64 insertions(+), 38 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index c1dfb01..282e220 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,50 +1,78 @@
-import { useState, useReducer } from 'react'
+import { useState, createContext, useContext } from 'react'
+import styles from './App.module.scss'
 
-function counterReducer(state, action) {
-    switch (action.type) {
-        case 'increment':
-            return state + 1
-        case 'decrement':
-            return state - 1
-        case 'reset':
-            return 0
-        case 'set_value':
-            return action.value
-        default:
-            return state
+const UserContext = createContext('')
+
+function UserProvider({ children }) {
+    const [name,setName] = useState('');
+    
+    const toggleName = (newName) => {
+        setName(newName);
     }
-}
-
-function Counter() {
-    const [count, dispatch] = useReducer(counterReducer,0);
     
     return (
-        <div>
-            <span>Счетчик: {count}</span>
-            <button onClick={()=> dispatch({type: 'increment'})}>+</button>
-            <button onClick={()=> dispatch({type: 'decrement'})}>-</button>
-            <button onClick={()=> dispatch({type: 'reset'})}>reset</button>
-            <button onClick={()=> dispatch({type: 'set_value', value: 5})}>set 5</button>
+        <UserContext.Provider value={{name, toggleName}}>
+            {children}
+        </UserContext.Provider>
+    )
+}
+
+function Form() {
+    const {name, toggleName} = useContext(UserContext)
+    const [newName,setNewName] = useState('');
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        toggleName(event.target[0].value)
+    }
+    const handlerChange = (event) => {
+        setNewName(event.target.value);
+    }
+    return (
+        <form onSubmit={handleSubmit}>
+        <input type='text' value={newName} onChange={handlerChange} />
+        <button type='submit'>Войти</button>
+        </form>
+    )
+}
+
+function ExitButton() {
+    const {name, toggleName} = useContext(UserContext)
+    
+    return (
+        <button onClick={() => toggleName('')}>Выход</button>
+    )
+}
+
+function Toolbar() {
+    const {name, toggleName} = useContext(UserContext)
+    return(
+        <div className={styles.container}>
+            <h3>Панель пользователя</h3>
+            {name && `Привет ${name}`}
+            {name ? <ExitButton /> : <Form /> }
+            
         </div>
     )
 }
 
-function App() {
-    const [tasks, setTasks] = useState([])
-    const [filter, setFilter] = useState('all')
-    const [sortBy,setSortBy] = useState('date')
-    
-    const addTask = newTask => {
-        setTasks([...tasks,newTask])
-    }
-    
-    
+function Page() {
+    return (
+        <div>
+            <h1 style={{textAlign: 'center'}}>Главная страница</h1>
+            <Toolbar />
+        </div>
+    )
+}
+
+function App() {    
     
 	return (
 		<>
 			{/* Добавьте тестовый контент для проверки */}
 			<h1>Hello, React!</h1>
-            <Counter />
+        <UserProvider>
+            <Page />
+        </UserProvider>
 		</>
 	)
 }
diff --git a/src/App.module.scss b/src/App.module.scss
index 5e617bc..974820c 100644
--- a/src/App.module.scss
+++ b/src/App.module.scss
@@ -1,10 +1,8 @@
 .container {
-/*    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;*/
     height: 500px;
-    overflow: auto;
     border: 1px solid black;
+    border-radius: 10px;
+    background-color: lightblue;
 }
 .item {
     font-size: 16pt;