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

src/App.jsx

@@ -1,44 +1,78 @@
-import { useMutation, QueryClientProvider, QueryClient } from '@tanstack/react-query'
+import { useState, createContext, useContext } from 'react'
-import PostAddForm from './components/PostAddForm'
+import styles from './App.module.scss'
 
-/*
+const UserContext = createContext('')
-const mutation = useMutation({
+
-    mutationFn: newUser => {
+function UserProvider({ children }) {
-        fetch('https://jsonplaceholder.typicode.com/users', {
+    const [name,setName] = useState('');
-            method: 'GET',
+    
-            headers: {'Content-type':'application/json'},
+    const toggleName = (newName) => {
-            body: JSON.stringify(newUser),
+        setName(newName);
-        }).then(res => res.json())
     }
-})
+    
-*/
+    return (
-
+        <UserContext.Provider value={{name, toggleName}}>
-const createQueryClient = () => {
+            {children}
-    new QueryClient({
+        </UserContext.Provider>
-        defaultOptions: {
+    )
-            queries: {
-                staleTime: 5 * 60*1000,
-                retry: 1,
-                gcTime: 10*60*1000,
-                refetchOnWindowFocus: false,
-            },
-            mutations: {
-                retry:0,
-                onError: error => {console.error('Mutation error:',error.message)}
-            }
-        }
-    })
 }
 
-function App() {
+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 Page() {
+    return (
+        <div>
+            <h1 style={{textAlign: 'center'}}>Главная страница</h1>
+            <Toolbar />
+        </div>
+    )
+}
+
+function App() {    
+    
 	return (
 		<>
 			{/* Добавьте тестовый контент для проверки */}
 			<h1>Hello, React!</h1>
-        <QueryClientProvider client={createQueryClient}>
+        <UserProvider>
-            <PostAddForm />
+            <Page />
-        </QueryClientProvider>
+        </UserProvider>
-            
 		</>
 	)
 }

src/App.module.scss

@@ -0,0 +1,13 @@
+.container {
+    height: 500px;
+    border: 1px solid black;
+    border-radius: 10px;
+    background-color: lightblue;
+}
+.item {
+    font-size: 16pt;
+    border: 1px dotted gray;
+    /*margin: 5px 10px;
+    padding: 10px;*/
+    border-radius: 5px;
+}