✨ feat(errors): implement error pages

dashpresshq · Jul 20, 2024 · f13ae2b · f13ae2b
1 parent 9fdd48f
commit f13ae2b
Show file tree

Hide file tree

Showing 8 changed files with 1,000 additions and 0 deletions.
diff --git a/src/frontend/views/errors/NotFound.tsx b/src/frontend/views/errors/NotFound.tsx
diff --git a/src/frontend/views/errors/ServerError.tsx b/src/frontend/views/errors/ServerError.tsx
diff --git a/src/frontend/views/errors/UnAuthorized.tsx b/src/frontend/views/errors/UnAuthorized.tsx
diff --git a/src/frontend/views/errors/_Base.tsx b/src/frontend/views/errors/_Base.tsx
@@ -0,0 +1,46 @@
+import { msg } from "@lingui/macro";
+import Head from "next/head";
+
+import { SoftButton } from "@/components/app/button/soft";
+import { useAppTheme } from "@/frontend/_layouts/useAppTheme";
+import { useAppConfiguration } from "@/frontend/hooks/configuration/configuration.store";
+import { NAVIGATION_LINKS } from "@/frontend/lib/routing/links";
+
+interface IProps {
+  code: number;
+  message: string;
+  description: string;
+  Icon: React.ReactNode;
+}
+
+export function BaseErrorCmp({ code, description, message, Icon }: IProps) {
+  const {
+    data: { name },
+  } = useAppConfiguration("site_settings");
+
+  useAppTheme();
+
+  return (
+    <>
+      <Head>
+        <title>
+          {message} - {name}
+        </title>
+      </Head>
+      <div className="flex h-lvh w-lvw flex-col items-center justify-center gap-6 bg-foundation">
+        <div className="text-center">
+          <h1 className="text-4xl font-bold text-main">{code}</h1>
+          <h3 className="text-muted">{message}</h3>
+        </div>
+        {Icon}
+        <p className="text-muted">{description}</p>
+        <SoftButton
+          action={NAVIGATION_LINKS.DASHBOARD.HOME}
+          label={msg`Go Home`}
+          size="lg"
+          systemIcon="Home"
+        />
+      </div>
+    </>
+  );
+}
diff --git a/src/pages/403.tsx b/src/pages/403.tsx
@@ -0,0 +1,5 @@
+import { UnAuthorized } from "@/frontend/views/errors/UnAuthorized";
+
+UnAuthorized.useAppLayout = false;
+
+export default UnAuthorized;
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
@@ -0,0 +1,5 @@
+import { NotFound } from "@/frontend/views/errors/NotFound";
+
+NotFound.useAppLayout = false;
+
+export default NotFound;
diff --git a/src/pages/500.tsx b/src/pages/500.tsx
@@ -0,0 +1,5 @@
+import { ServerError } from "@/frontend/views/errors/ServerError";
+
+ServerError.useAppLayout = false;
+
+export default ServerError;
diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -17,6 +17,7 @@
   }
 
   [data-theme="light"] {
+    color-scheme: light;
     --dp-primary-text: var(--white);
     --dp-primary: var(--app-primary);
     --dp-primary-alpha-opacity: var(--light-primary-alpha-opacity);
@@ -30,6 +31,7 @@
   }
 
   [data-theme="dark"] {
+    color-scheme: dark;
     --dp-primary: var(--app-primary);
     --dp-primary-alpha-opacity: var(--dark-primary-alpha-opacity);
     --dp-primary-alpha-text: var(--white);