1import { useState } from 'react';
2
3function App() {
4  const [user, setUser] = useState({ name: 'Иван', role: 'admin' });
5  const [theme, setTheme] = useState('light');
6
7  return (
8    <Layout user={user} theme={theme} onThemeChange={setTheme}>
9      <MainContent user={user} theme={theme} onLogout={() => setUser(null)} />
10    </Layout>
11  );
12}
13
14function Layout({ user, theme, onThemeChange, children }) {
15  return (
16    <div className={`layout layout--${theme}`}>
17      <Header user={user} theme={theme} onThemeChange={onThemeChange} />
18      <main>{children}</main>
19    </div>
20  );
21}
22
23function Header({ user, theme, onThemeChange }) {
24  return (
25    <header>
26      <Logo />
27      <UserMenu user={user} theme={theme} onThemeChange={onThemeChange} />
28    </header>
29  );
30}
31
32function UserMenu({ user, theme, onThemeChange }) {
33  return (
34    <div className='user-menu'>
35      <span>{user?.name}</span>
36      <ThemeToggle theme={theme} onThemeChange={onThemeChange} />
37    </div>
38  );
39}
40
41function ThemeToggle({ theme, onThemeChange }) {
42  return (
43    <button onClick={() => onThemeChange(theme === 'light' ? 'dark' : 'light')}>
44      {theme === 'light' ? 'Тёмная тема' : 'Светлая тема'}
45    </button>
46  );
47}
48
49function MainContent({ user, theme, onLogout }) {
50  return (
51    <div className={`content content--${theme}`}>
52      <p>Привет, {user?.name}!</p>
53      <button onClick={onLogout}>Выйти</button>
54    </div>
55  );
56}