68 lines
2.5 KiB
JavaScript
Executable File
68 lines
2.5 KiB
JavaScript
Executable File
import React, { useState, useMemo } from "react";
|
|
import { ThemeProvider, CssBaseline, Switch, Box } from "@mui/material";
|
|
import Dashboard from "./Components/Layout/Dashboard";
|
|
import LoginModal from "./Components/UI/LoginModal";
|
|
import { lightTheme, darkTheme } from "./Style/theme";
|
|
import Logo from './assets/images/logo.svg?react'; // Импорт как компонента
|
|
|
|
function App() {
|
|
const [isAuthenticated, setIsAuthenticated] = useState(false);
|
|
const [showLoginModal, setShowLoginModal] = useState(true);
|
|
const [isDarkMode, setIsDarkMode] = useState(
|
|
window.matchMedia("(prefers-color-scheme: dark)").matches
|
|
);
|
|
|
|
const theme = useMemo(() => (isDarkMode ? darkTheme : lightTheme), [isDarkMode]);
|
|
|
|
const handleLogin = () => {
|
|
setIsAuthenticated(true);
|
|
setShowLoginModal(false);
|
|
};
|
|
|
|
return (
|
|
<ThemeProvider theme={theme}>
|
|
<CssBaseline />
|
|
{!isAuthenticated && showLoginModal ? (
|
|
<>
|
|
{/* Логотип */}
|
|
<Box
|
|
component="div"
|
|
sx={{
|
|
position: "fixed",
|
|
top: 24,
|
|
left: "50%", // Сдвигаем начало логотипа в центр
|
|
transform: "translateX(-50%)", // Смещаем назад на половину ширины логотипа
|
|
zIndex: 1200,
|
|
'& svg': {
|
|
width: 400,
|
|
height: 'auto'
|
|
}
|
|
}}
|
|
>
|
|
<Logo />
|
|
</Box>
|
|
|
|
<LoginModal
|
|
onLogin={handleLogin}
|
|
onClose={() => setShowLoginModal(false)}
|
|
/>
|
|
</>
|
|
) : (
|
|
<Box sx={{
|
|
display: "flex",
|
|
height: "100vh",
|
|
overflow: "hidden",
|
|
bgcolor: "background.default",
|
|
color: "text.primary"
|
|
}}>
|
|
<Dashboard />
|
|
<Box sx={{ position: "absolute", top: 10, right: 10 }}>
|
|
<Switch checked={isDarkMode} onChange={() => setIsDarkMode((prev) => !prev)} />
|
|
</Box>
|
|
</Box>
|
|
)}
|
|
</ThemeProvider>
|
|
);
|
|
}
|
|
|
|
export default App; |