40 lines
1.5 KiB
JavaScript
Executable File
40 lines
1.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 "./Style/LoginModal.css";
|
|
|
|
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 ? (
|
|
<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;
|