first commit

src/components/ErrorBoundary.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Card } from './ui/Card';
+import { isRouteErrorResponse, useRouteError } from 'react-router-dom';
+
+export function ErrorBoundary() {
+  const error = useRouteError();
+  console.error(error);
+
+  return (
+    <div className="min-h-screen bg-gray-100 py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-3xl mx-auto">
+        <Card>
+          <div className="p-6 text-center">
+            <h2 className="text-2xl font-bold text-red-600 mb-4">
+              Ocorreu um erro
+            </h2>
+            
+            <div className="mt-4 p-4 bg-red-50 rounded-lg text-left">
+              {isRouteErrorResponse(error) ? (
+                <div>
+                  <p><strong>Status:</strong> {error.status}</p>
+                  <p><strong>Mensagem:</strong> {error.data.message || error.statusText}</p>
+                </div>
+              ) : error instanceof Error ? (
+                <div>
+                  <p><strong>Erro:</strong> {error.message}</p>
+                  {error.stack && (
+                    <details className="mt-2">
+                      <summary className="cursor-pointer text-sm">Ver detalhes técnicos</summary>
+                      <pre className="mt-2 whitespace-pre-wrap text-xs">
+                        {error.stack}
+                      </pre>
+                    </details>
+                  )}
+                </div>
+              ) : (
+                <p>Ocorreu um erro desconhecido.</p>
+              )}
+            </div>
+            
+            <div className="mt-6">
+              <a
+                href="/"
+                className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
+              >
+                Voltar para a página inicial
+              </a>
+            </div>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}