From 5a7690fbeb7c87e71f9e35a5b2232ccda89d920e Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Sat, 20 Jul 2024 13:01:12 +0200
Subject: [PATCH] Create Error state

---
 dashboard/src/states/Error/Error.jsx | 22 ++++++++++++++++++++++
 dashboard/src/states/Error/index.js  |  1 +
 2 files changed, 23 insertions(+)
 create mode 100644 dashboard/src/states/Error/Error.jsx
 create mode 100644 dashboard/src/states/Error/index.js

diff --git a/dashboard/src/states/Error/Error.jsx b/dashboard/src/states/Error/Error.jsx
new file mode 100644
index 0000000..d95dfe4
--- /dev/null
+++ b/dashboard/src/states/Error/Error.jsx
@@ -0,0 +1,22 @@
+import {Stack, Typography, useMediaQuery, useTheme} from "@mui/material";
+import ServerDown from "@/common/assets/images/error/server_down.svg";
+
+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 no..</Typography>
+                <Typography variant="h4" fontWeight={500}>The backend is currently not reachable.</Typography>
+
+                <Typography variant="h5" fontWeight={500}>
+                    This page will reload automatically once the backend is reachable again.
+                </Typography>
+            </Stack>
+
+            {!isMobile && <img src={ServerDown} alt="Server down" height={350}/>}
+        </Stack>
+    )
+}
\ No newline at end of file
diff --git a/dashboard/src/states/Error/index.js b/dashboard/src/states/Error/index.js
new file mode 100644
index 0000000..ec75d25
--- /dev/null
+++ b/dashboard/src/states/Error/index.js
@@ -0,0 +1 @@
+export {Error as default} from "./Error.jsx";
\ No newline at end of file