MichilisandClaude Sonnet 5
09bfb17f03
Adds app/error.tsx (client error boundary, reuses Header/Footer/Button) and app/global-error.tsx (root layout crash fallback with self-contained html/body and manually replicated styling), both bilingual (ES/EN) and matching the brand's colors, fonts, and tone. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect } from 'react';
|
|
import Link from 'next/link';
|
|
import Header from '@/components/layout/Header';
|
|
import Footer from '@/components/layout/Footer';
|
|
import Button from '@/components/ui/Button';
|
|
|
|
export default function Error({
|
|
error,
|
|
reset,
|
|
}: {
|
|
error: Error & { digest?: string };
|
|
reset: () => void;
|
|
}) {
|
|
useEffect(() => {
|
|
if (process.env.NODE_ENV === 'development') {
|
|
console.error(error);
|
|
}
|
|
}, [error]);
|
|
|
|
return (
|
|
<div className="min-h-screen flex flex-col">
|
|
<Header />
|
|
<main className="flex-1 flex items-center justify-center bg-secondary-gray px-4 py-16">
|
|
<div className="text-center max-w-md mx-auto">
|
|
<div className="text-6xl mb-4">😅</div>
|
|
<h1 className="text-3xl font-semibold text-primary-dark mb-2">
|
|
¡Ups! Algo salió mal
|
|
</h1>
|
|
<p className="text-lg text-gray-700 mb-6">
|
|
Oops, something went wrong
|
|
</p>
|
|
<p className="text-gray-600 mb-8">
|
|
No fue tu culpa, fue un error de nuestro lado. Prueba de nuevo o vuelve al inicio mientras lo revisamos.
|
|
<br />
|
|
It was not your fault, something broke on our end. Try again or head back home while we take a look.
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<Button onClick={reset} size="lg">
|
|
Intentar de nuevo · Try again
|
|
</Button>
|
|
<Link href="/">
|
|
<Button variant="outline" size="lg" className="w-full sm:w-auto">
|
|
Ir al inicio · Go home
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}
|