Add 404 Page

Signed-off-by: Hassan Abouelela <[email protected]>

1 files changed, 26 insertions, 0 deletions

diff --git a/src/pages/NotFound.tsx b/src/pages/NotFound.tsx
new file mode 100644
index 0000000..6947a38
--- /dev/null
+++ b/src/pages/NotFound.tsx
@@ -0,0 +1,26 @@
+/** @jsx jsx */
+import {jsx, css} from "@emotion/react";
+import {Link} from "react-router-dom";
+
+import HeaderBar from "../components/HeaderBar";
+import {mainTextStyles, navigationStyles, returnButtonStyles, unselectable} from "../commonStyles";
+
+interface NotFoundProps {
+    message: string
+}
+
+
+/** Simple 404 page. */
+export default function NotFound(props: NotFoundProps): JSX.Element {
+    return <div>
+        <HeaderBar/>
+        <div css={css`width: 80%; margin: auto;`}>
+            <div css={mainTextStyles}>
+                <p>{props.message}</p>
+            </div>
+            <div css={[unselectable, navigationStyles]}>
+                <Link css={returnButtonStyles} to="/">Return Home</Link>
+            </div>
+        </div>
+    </div>;
+}