28 lines
1.3 KiB
JavaScript
28 lines
1.3 KiB
JavaScript
import {Box, Button, Stack, Typography, useMediaQuery, useTheme} from "@mui/material";
|
|
import ServerDown from "@/common/assets/images/error/server_down.svg";
|
|
import {OpenInNew} from "@mui/icons-material";
|
|
|
|
export const Error = () => {
|
|
const theme = useTheme();
|
|
const isMobile = useMediaQuery(theme.breakpoints.down("lg"));
|
|
|
|
return (
|
|
<Stack direction="row" alignItems="center" justifyContent="center" sx={{height: "100vh"}} gap={5} p={3}>
|
|
<Stack direction="column" justifyContent="center" sx={{width: "30rem"}} gap={2}>
|
|
<Typography variant="h2" fontWeight={700}>Oh nein..</Typography>
|
|
<Typography variant="h4" fontWeight={500}>Unser Backend ist derzeit nicht erreichbar.</Typography>
|
|
|
|
<Typography variant="h5" fontWeight={500}>
|
|
Die Seite wird automatisch neu geladen, sobald das Backend wieder erreichbar ist.
|
|
</Typography>
|
|
|
|
<Box>
|
|
<Button variant="outlined" color="primary" startIcon={<OpenInNew/>}
|
|
href="https://status.licenseapi.de" target="_blank">Zur Statusseite</Button>
|
|
</Box>
|
|
</Stack>
|
|
|
|
{!isMobile && <img src={ServerDown} alt="Server down" height={350}/>}
|
|
</Stack>
|
|
)
|
|
} |