From f9668827aafcea51a2d2d1898e13df92b2c33249 Mon Sep 17 00:00:00 2001
From: Warwick <warwick@debian-BULLSEYE-live-builder-AMD64>
Date: Fri, 4 Mar 2022 15:28:19 +0000
Subject: [PATCH] added 404 page and made every route load asynchrounously.

---
 src/404Page.jsx | 28 ++++++++++++++++++++++++++++
 src/index.jsx   | 17 +++++++++++------
 2 files changed, 39 insertions(+), 6 deletions(-)
 create mode 100644 src/404Page.jsx

diff --git a/src/404Page.jsx b/src/404Page.jsx
new file mode 100644
index 0000000..35dd128
--- /dev/null
+++ b/src/404Page.jsx
@@ -0,0 +1,28 @@
+import { h, render, Component } from "preact";
+import {
+  Container,
+  Card,
+  CardContent,
+  Typography,
+} from "@material-ui/core";
+
+class LostPage extends Component {
+  render() {
+    return (
+      <span>
+        <Container maxWidth="sm" >
+          <Card>
+            <CardContent>
+              <Typography variant="h1"> Error 404</Typography>
+              <Typography variant="body1">
+                There is no content here...
+              </Typography>
+            </CardContent>
+          </Card>
+        </Container>
+      </span>
+    );
+  }
+}
+
+export default LostPage;
diff --git a/src/index.jsx b/src/index.jsx
index 5bc56c0..d0f8f39 100755
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -13,12 +13,17 @@ class App extends Component {
       <ThemeProvider theme={theme}>
         <CssBaseline />
         <Router>
-          <Home path="/" />
-          <AsyncRoute
-            path="/contact"
-            getComponent={() =>
-              import("./Contact.jsx").then((module) => module.default)
-            }
+          <AsyncRoute path="/" getComponent={() =>
+            import("./Home").then((module) => module.default)
+          }
+          />
+          <AsyncRoute path="/contact" getComponent={() =>
+            import("./Contact").then((module) => module.default)
+          }
+          />
+          <AsyncRoute default getComponent={() =>
+            import("./404Page").then((module) => module.default)
+          }
           />
         </Router>
       </ThemeProvider>