Some refactor

src/app/error.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { useEffect } from "react";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
+  return (
+    <main className="min-h-dvh flex items-center justify-center px-6">
+      <div className="max-w-lg text-center space-y-6">
+        <h1 className="text-2xl font-semibold tracking-tight">
+          Something went wrong
+        </h1>
+
+        <p className="text-muted-foreground">
+          An unexpected error occurred while loading this section.
+        </p>
+
+        <div className="flex justify-center gap-4 pt-2">
+          <button
+            onClick={reset}
+            className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition"
+          >
+            Try again
+          </button>
+
+          <a
+            href="/"
+            className="rounded-md border px-4 py-2 text-sm font-medium hover:bg-muted transition"
+          >
+            Go home
+          </a>
+        </div>
+
+        {process.env.NODE_ENV === "development" && (
+          <pre className="mt-6 rounded-md bg-muted p-4 text-left text-xs overflow-auto">
+            {error.message}
+          </pre>
+        )}
+      </div>
+    </main>
+  );
+}