51 lines
1.9 KiB
TypeScript
51 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import { isRouteErrorResponse, useNavigate, useRouteError } from 'react-router-dom';
|
|
import { AlertTriangle, RotateCcw } from 'lucide-react';
|
|
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
export function RouteErrorElement(): React.ReactElement {
|
|
const error = useRouteError();
|
|
const navigate = useNavigate();
|
|
|
|
const statusText = (() => {
|
|
if (isRouteErrorResponse(error)) {
|
|
return `${error.status} ${error.statusText}`;
|
|
}
|
|
if (error instanceof Error) {
|
|
return error.message;
|
|
}
|
|
return 'Unerwarteter Fehler';
|
|
})();
|
|
|
|
return (
|
|
<div className="flex min-h-screen items-center justify-center bg-slate-50 px-4 py-10 text-slate-900 dark:bg-slate-950 dark:text-slate-50">
|
|
<div className="w-full max-w-lg rounded-2xl border border-slate-200 bg-white p-6 shadow-lg dark:border-slate-800 dark:bg-slate-900">
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-200">
|
|
<AlertTriangle className="h-5 w-5" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-semibold text-slate-900 dark:text-slate-50">Unerwarteter Fehler</p>
|
|
<p className="text-xs text-slate-600 dark:text-slate-300">{statusText}</p>
|
|
</div>
|
|
</div>
|
|
<p className="mt-4 text-sm text-slate-700 dark:text-slate-200">
|
|
Etwas ist schiefgelaufen. Du kannst es erneut versuchen oder zur letzten Seite zurückkehren.
|
|
</p>
|
|
<div className="mt-5 flex flex-wrap gap-2">
|
|
<Button variant="outline" onClick={() => navigate(-1)}>
|
|
Zurück
|
|
</Button>
|
|
<Button onClick={() => window.location.reload()}>
|
|
<RotateCcw className="mr-2 h-4 w-4" /> Neu laden
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default RouteErrorElement;
|
|
|