76 lines
2.6 KiB
TypeScript
76 lines
2.6 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect } from 'react';
|
|
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
|
|
interface ErrorProps {
|
|
error: Error & { digest?: string };
|
|
reset: () => void;
|
|
}
|
|
|
|
export default function Error({ error, reset }: ErrorProps) {
|
|
useEffect(() => {
|
|
// Log l'erreur dans la console/terminal
|
|
console.error('Erreur serveur:', error);
|
|
}, [error]);
|
|
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-cwhite">
|
|
<div className="text-center px-4">
|
|
{/* Logo */}
|
|
<div className="flex justify-center mb-8">
|
|
<Image
|
|
src="/logo.svg"
|
|
alt="MAD Logo"
|
|
width={120}
|
|
height={120}
|
|
/>
|
|
</div>
|
|
|
|
{/* 500 Content */}
|
|
<div className="max-w-md mx-auto">
|
|
<h1 className="text-9xl font-bold text-lorange mb-4">500</h1>
|
|
<h2 className="text-3xl font-semibold text-gray-900 mb-4">
|
|
Erreur serveur
|
|
</h2>
|
|
<p className="text-gray-600 mb-2">
|
|
Une erreur inattendue s'est produite sur le serveur.
|
|
</p>
|
|
{error.message && (
|
|
<p className="text-sm text-gray-500 mb-8 font-mono bg-gray-100 p-3 rounded-lg">
|
|
{error.message}
|
|
</p>
|
|
)}
|
|
{!error.message && (
|
|
<p className="text-gray-600 mb-8">
|
|
Veuillez réessayer dans quelques instants.
|
|
</p>
|
|
)}
|
|
|
|
{/* Action Buttons */}
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<button
|
|
onClick={reset}
|
|
className="inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-lg text-sm font-medium text-white bg-lorange hover:bg-dorange focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lorange transition-colors"
|
|
>
|
|
Réessayer
|
|
</button>
|
|
<Link
|
|
href="/dashboard"
|
|
className="inline-flex items-center justify-center px-6 py-3 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lorange transition-colors"
|
|
>
|
|
Retour au tableau de bord
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="mt-12 text-center text-xs text-gray-500">
|
|
© {new Date().getFullYear()} MAD - <a href="https://legouix.dev" target="_blank" className="text-lblue hover:text-dblue">Propulsé par LGX</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|