From 9991cd1bf7cc82dc956320f7f64a71ab8be4de68 Mon Sep 17 00:00:00 2001
From: Beau Findlay <beau@unhurd.co.uk>
Date: Fri, 26 Apr 2024 18:06:21 +0100
Subject: [PATCH] Add error page

---
 src/Client/src/pages/ErrorPage.tsx | 35 ++++++++++++++++++++++++++++++
 src/Client/src/routes.tsx          |  2 ++
 2 files changed, 37 insertions(+)
 create mode 100644 src/Client/src/pages/ErrorPage.tsx

diff --git a/src/Client/src/pages/ErrorPage.tsx b/src/Client/src/pages/ErrorPage.tsx
new file mode 100644
index 0000000..c4c5686
--- /dev/null
+++ b/src/Client/src/pages/ErrorPage.tsx
@@ -0,0 +1,35 @@
+import { isRouteErrorResponse, useRouteError } from "react-router-dom";
+import Footer from "../components/Footer";
+import NavBar from "../components/NavBar";
+
+export default function ErrorPage() {
+  const error = useRouteError();
+
+  let errorCode = "Oops";
+  let errorTitle = "Something went wrong.";
+  let errorMessage = "This error has been automatically logged.";
+
+  if (isRouteErrorResponse(error)) {
+    errorCode = "404";
+    errorTitle = "Page not found";
+    errorMessage = "Sorry, this page dosen't exist.";
+  }
+
+  return (
+    <div className="bg-black font-mono text-slate-50 antialiased px-6 lg:px-8">
+      <div className="flex flex-col min-h-screen mx-auto max-w-7xl fade-in">
+        <NavBar />
+        <main className="grid min-h-full place-items-center px-6 py-24 sm:py-32 lg:px-8">
+          <div className="text-center">
+            <p className="text-base font-semibold ">{errorCode}</p>
+            <h1 className="mt-4 text-4xl font-bold tracking-tight">
+              {errorTitle}
+            </h1>
+            <p className="mt-6 text-base leading-7 ">{errorMessage}</p>
+          </div>
+        </main>
+        <Footer />
+      </div>
+    </div>
+  );
+}
diff --git a/src/Client/src/routes.tsx b/src/Client/src/routes.tsx
index 640da93..10c1fd1 100644
--- a/src/Client/src/routes.tsx
+++ b/src/Client/src/routes.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { createBrowserRouter } from "react-router-dom";
 import Layout from "./pages/Layout";
+import ErrorPage from "./pages/ErrorPage";
 
 const HomePage = React.lazy(() => import("./pages/HomePage"));
 const ContactPage = React.lazy(() => import("./pages/ContactPage"));
@@ -10,6 +11,7 @@ const router = createBrowserRouter([
   {
     path: "/",
     element: <Layout />,
+    errorElement: <ErrorPage />,
     children: [
       { index: true, element: <HomePage /> },
       { path: "contact", element: <ContactPage /> },