Я уже не помню что там было

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) {
+const UserContext = createContext('')
-    switch (action.type) {
+
-        case 'increment':
+function UserProvider({ children }) {
-            return state + 1
+    const [name,setName] = useState('');
-        case 'decrement':
+    
-            return state - 1
+    const toggleName = (newName) => {
-        case 'reset':
+        setName(newName);
-            return 0
-        case 'set_value':
-            return action.value
-        default:
-            return state
     }
-}
-
-function Counter() {
-    const [count, dispatch] = useReducer(counterReducer,0);
     
     return (
-        <div>
+        <UserContext.Provider value={{name, toggleName}}>
-            <span>Счетчик: {count}</span>
+            {children}
-            <button onClick={()=> dispatch({type: 'increment'})}>+</button>
+        </UserContext.Provider>
-            <button onClick={()=> dispatch({type: 'decrement'})}>-</button>
+    )
-            <button onClick={()=> dispatch({type: 'reset'})}>reset</button>
+}
-            <button onClick={()=> dispatch({type: 'set_value', value: 5})}>set 5</button>
+
+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() {
+function Page() {
-    const [tasks, setTasks] = useState([])
+    return (
-    const [filter, setFilter] = useState('all')
+        <div>
-    const [sortBy,setSortBy] = useState('date')
+            <h1 style={{textAlign: 'center'}}>Главная страница</h1>
-    
+            <Toolbar />
-    const addTask = newTask => {
+        </div>
-        setTasks([...tasks,newTask])
+    )
-    }
+}
-    
+
-    
+function App() {    
     
 	return (
 		<>
 			{/* Добавьте тестовый контент для проверки */}
 			<h1>Hello, React!</h1>
-            <Counter />
+        <UserProvider>
+            <Page />
+        </UserProvider>
 		</>
 	)
 }

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;