Merge branch 'main' into fix/structured-data

Author: naps62

src/components/DefaultCatchBoundary.tsx

@@ -1,3 +1,4 @@
+import { Button } from "@ethui/ui/components/shadcn/button";
 import type { ErrorComponentProps } from "@tanstack/react-router";
 import {
   ErrorComponent,
@@ -13,42 +14,52 @@ export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
     strict: false,
     select: (state) => state.id === rootRouteId,
   });
+  const showErrorDetails = import.meta.env.DEV;
 
   console.error("DefaultCatchBoundary Error:", error);
 
   return (
-    <div className="flex min-w-0 flex-1 flex-col items-center justify-center gap-6 p-4">
-      <ErrorComponent error={error} />
-      <div className="flex flex-wrap items-center gap-2">
-        <button
-          type="button"
-          onClick={() => {
-            router.invalidate();
-          }}
-          className="rounded bg-gray-600 px-2 py-1 font-extrabold text-white uppercase dark:bg-gray-700"
-        >
-          Try Again
-        </button>
-        {isRoot ? (
-          <Link
-            to="/"
-            className="rounded bg-gray-600 px-2 py-1 font-extrabold text-white uppercase dark:bg-gray-700"
-          >
-            Home
-          </Link>
-        ) : (
-          <Link
-            to="/"
-            className="rounded bg-gray-600 px-2 py-1 font-extrabold text-white uppercase dark:bg-gray-700"
-            onClick={(e) => {
-              e.preventDefault();
-              window.history.back();
+    <div className="min-h-screen bg-white">
+      <main className="container mx-auto flex min-h-[60vh] flex-col items-start justify-center gap-4 px-4 py-12 md:py-20">
+        <p className="text-gray-500 text-sm uppercase tracking-wide">
+          Something went wrong
+        </p>
+        <h1 className="font-bold text-3xl text-gray-900 sm:text-4xl">
+          We hit an unexpected error
+        </h1>
+        <p className="max-w-2xl text-gray-600">
+          Please try again. If the problem keeps happening, head back home and
+          restart your flow.
+        </p>
+        {showErrorDetails && <ErrorComponent error={error} />}
+        <div className="flex flex-wrap items-center gap-2">
+          <Button
+            type="button"
+            onClick={() => {
+              router.invalidate();
             }}
           >
-            Go Back
-          </Link>
-        )}
-      </div>
+            Try again
+          </Button>
+          {isRoot ? (
+            <Button asChild variant="secondary">
+              <Link to="/">Home</Link>
+            </Button>
+          ) : (
+            <Button asChild variant="secondary">
+              <Link
+                to="/"
+                onClick={(e) => {
+                  e.preventDefault();
+                  window.history.back();
+                }}
+              >
+                Go back
+              </Link>
+            </Button>
+          )}
+        </div>
+      </main>
     </div>
   );
 }

src/components/NotFound.tsx

@@ -1,26 +1,33 @@
+import { Button } from "@ethui/ui/components/shadcn/button";
 import { Link } from "@tanstack/react-router";
 
 export function NotFound({ children }: { children?: any }) {
   return (
-    <div className="space-y-2 p-2">
-      <div className="text-gray-600 dark:text-gray-400">
-        {children || <p>The page you are looking for does not exist.</p>}
-      </div>
-      <p className="flex flex-wrap items-center gap-2">
-        <button
-          type="button"
-          onClick={() => window.history.back()}
-          className="rounded bg-emerald-500 px-2 py-1 font-black text-sm text-white uppercase"
-        >
-          Go back
-        </button>
-        <Link
-          to="/"
-          className="rounded bg-cyan-600 px-2 py-1 font-black text-sm text-white uppercase"
-        >
-          Start Over
-        </Link>
-      </p>
+    <div className="min-h-screen bg-white">
+      <main className="container mx-auto flex min-h-[60vh] flex-col items-start justify-center gap-4 px-4 py-12 md:py-20">
+        <p className="text-gray-500 text-sm uppercase tracking-wide">
+          404 error
+        </p>
+        <h1 className="font-bold text-3xl text-gray-900 sm:text-4xl">
+          Page not found
+        </h1>
+        <div className="max-w-2xl text-gray-600">
+          {children || (
+            <p>
+              The page you are looking for does not exist, or it might have
+              moved.
+            </p>
+          )}
+        </div>
+        <div className="flex flex-wrap items-center gap-2">
+          <Button type="button" onClick={() => window.history.back()}>
+            Go back
+          </Button>
+          <Button asChild variant="secondary">
+            <Link to="/">Home</Link>
+          </Button>
+        </div>
+      </main>
     </div>
   );
 }