Merge main into fix/images-performance

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,
@@ -6,7 +7,6 @@ import {
   useMatch,
   useRouter,
 } from "@tanstack/react-router";
-import { Header } from "./header";
 
 export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
   const router = useRouter();
@@ -20,7 +20,6 @@ export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
 
   return (
     <div className="min-h-screen bg-white">
-      <Header />
       <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
@@ -34,33 +33,30 @@ export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
         </p>
         {showErrorDetails && <ErrorComponent error={error} />}
         <div className="flex flex-wrap items-center gap-2">
-          <button
+          <Button
             type="button"
             onClick={() => {
               router.invalidate();
             }}
-            className="rounded bg-gray-900 px-3 py-2 font-semibold text-sm text-white"
           >
             Try again
-          </button>
+          </Button>
           {isRoot ? (
-            <Link
-              to="/"
-              className="rounded bg-gray-100 px-3 py-2 font-semibold text-gray-900 text-sm"
-            >
-              Home
-            </Link>
+            <Button asChild variant="secondary">
+              <Link to="/">Home</Link>
+            </Button>
           ) : (
-            <Link
-              to="/"
-              className="rounded bg-gray-100 px-3 py-2 font-semibold text-gray-900 text-sm"
-              onClick={(e) => {
-                e.preventDefault();
-                window.history.back();
-              }}
-            >
-              Go back
-            </Link>
+            <Button asChild variant="secondary">
+              <Link
+                to="/"
+                onClick={(e) => {
+                  e.preventDefault();
+                  window.history.back();
+                }}
+              >
+                Go back
+              </Link>
+            </Button>
           )}
         </div>
       </main>

src/components/NotFound.tsx

@@ -1,10 +1,9 @@
+import { Button } from "@ethui/ui/components/shadcn/button";
 import { Link } from "@tanstack/react-router";
-import { Header } from "./header";
 
 export function NotFound({ children }: { children?: any }) {
   return (
     <div className="min-h-screen bg-white">
-      <Header />
       <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
@@ -21,19 +20,12 @@ export function NotFound({ children }: { children?: any }) {
           )}
         </div>
         <div className="flex flex-wrap items-center gap-2">
-          <button
-            type="button"
-            onClick={() => window.history.back()}
-            className="rounded bg-emerald-600 px-3 py-2 font-semibold text-sm text-white"
-          >
+          <Button type="button" onClick={() => window.history.back()}>
             Go back
-          </button>
-          <Link
-            to="/"
-            className="rounded bg-gray-900 px-3 py-2 font-semibold text-sm text-white"
-          >
-            Home
-          </Link>
+          </Button>
+          <Button asChild variant="secondary">
+            <Link to="/">Home</Link>
+          </Button>
         </div>
       </main>
     </div>