2022-07-17 20:42:29 +00:00
|
|
|
import React, { Component , Suspense } from "react";
|
2022-05-02 19:28:34 +00:00
|
|
|
import ReactDOM from 'react-dom/client';
|
2022-01-02 00:19:18 +00:00
|
|
|
import HomePage from "./HomePage";
|
2022-05-16 19:34:46 +00:00
|
|
|
import { CssBaseline, IconButton , Link} from "@mui/material";
|
2022-03-16 13:23:48 +00:00
|
|
|
import { ThemeProvider, createTheme } from '@mui/material/styles';
|
2022-03-17 15:56:08 +00:00
|
|
|
import UnsafeAlert from "./UnsafeAlert";
|
2022-05-16 20:42:51 +00:00
|
|
|
import { LearnDialog } from "./Dialogs";
|
2022-01-02 00:19:18 +00:00
|
|
|
|
2022-04-05 14:25:53 +00:00
|
|
|
import { I18nextProvider } from "react-i18next";
|
|
|
|
import i18n from "./i18n";
|
|
|
|
|
2022-05-16 20:42:51 +00:00
|
|
|
//Icons
|
2022-03-24 13:41:32 +00:00
|
|
|
import DarkModeIcon from '@mui/icons-material/DarkMode';
|
|
|
|
import LightModeIcon from '@mui/icons-material/LightMode';
|
2022-05-16 19:34:46 +00:00
|
|
|
import SchoolIcon from '@mui/icons-material/School';
|
2022-03-24 13:41:32 +00:00
|
|
|
|
2022-01-01 23:58:44 +00:00
|
|
|
export default class App extends Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2022-01-29 19:51:26 +00:00
|
|
|
this.state = {
|
2022-08-15 11:00:16 +00:00
|
|
|
dark: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches,
|
2022-05-16 20:42:51 +00:00
|
|
|
openLearn: false,
|
2022-01-29 19:51:26 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-04-05 14:25:53 +00:00
|
|
|
lightTheme = createTheme({});
|
2022-03-16 13:23:48 +00:00
|
|
|
|
|
|
|
darkTheme = createTheme({
|
|
|
|
palette: {
|
|
|
|
mode: 'dark',
|
|
|
|
background: {
|
2022-03-24 13:41:32 +00:00
|
|
|
default: "#070707"
|
2022-03-16 13:23:48 +00:00
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
2022-01-01 23:58:44 +00:00
|
|
|
render() {
|
2022-01-02 00:19:18 +00:00
|
|
|
return (
|
2022-07-17 20:42:29 +00:00
|
|
|
<Suspense fallback="loading language">
|
2022-04-05 14:25:53 +00:00
|
|
|
<I18nextProvider i18n={i18n}>
|
|
|
|
<ThemeProvider theme={this.state.dark ? this.darkTheme : this.lightTheme}>
|
|
|
|
<CssBaseline/>
|
2022-05-16 20:42:51 +00:00
|
|
|
<LearnDialog open={this.state.openLearn} onClose={()=> this.setState({openLearn:false})}/>
|
2022-05-16 20:57:44 +00:00
|
|
|
<IconButton sx={{position:'fixed',right:'34px'}} onClick={()=> this.setState({openLearn:true})}><SchoolIcon/></IconButton>
|
2022-04-05 14:25:53 +00:00
|
|
|
<IconButton sx={{position:'fixed',right:'0px'}} onClick={()=>this.setState({dark:!this.state.dark})}>
|
|
|
|
{this.state.dark ? <LightModeIcon/>:<DarkModeIcon/>}
|
|
|
|
</IconButton>
|
|
|
|
<UnsafeAlert className="unsafeAlert"/>
|
|
|
|
<HomePage/>
|
|
|
|
</ThemeProvider>
|
|
|
|
</I18nextProvider>
|
2022-07-17 20:42:29 +00:00
|
|
|
</Suspense>
|
2022-01-02 00:19:18 +00:00
|
|
|
);
|
2022-01-01 23:58:44 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-05-02 19:28:34 +00:00
|
|
|
const root = ReactDOM.createRoot(
|
|
|
|
document.getElementById("app")
|
|
|
|
);
|
|
|
|
|
|
|
|
root.render(<App />);
|