43 lines
1.6 KiB
TypeScript
43 lines
1.6 KiB
TypeScript
"use client";
|
||
|
||
export default function GlobalError({
|
||
error,
|
||
reset,
|
||
}: {
|
||
error: Error & { digest?: string };
|
||
reset: () => void;
|
||
}) {
|
||
return (
|
||
<main className="relative isolate min-h-screen flex items-center justify-center bg-gradient-to-b from-neutral-50 via-white to-neutral-100 dark:from-neutral-950 dark:via-neutral-900 dark:to-neutral-950">
|
||
<section className="container mx-auto max-w-lg px-6 py-16 text-center animate-[fadeInUp_0.6s_ease_forwards]">
|
||
<div className="mx-auto inline-flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-r from-red-500 via-pink-600 to-purple-600 text-white text-3xl shadow-lg">
|
||
⚠️
|
||
</div>
|
||
|
||
<h1 className="mt-6 text-4xl font-bold tracking-tight bg-gradient-to-r from-blue-600 via-purple-600 to-blue-600 bg-clip-text text-transparent">
|
||
Something went wrong
|
||
</h1>
|
||
|
||
<p className="mt-4 text-neutral-700 dark:text-neutral-300">
|
||
An unexpected error occurred. Please try again.
|
||
</p>
|
||
|
||
{error?.digest && (
|
||
<p className="mt-2 text-xs text-neutral-500 dark:text-neutral-500">
|
||
Error ID: <code>{error.digest}</code>
|
||
</p>
|
||
)}
|
||
|
||
<div className="mt-8 flex items-center justify-center">
|
||
<button
|
||
onClick={() => reset()}
|
||
className="inline-flex items-center rounded-lg bg-gradient-to-r from-blue-600 via-purple-600 to-blue-600 text-white px-6 py-2.5 text-sm font-medium hover:opacity-90 transition"
|
||
>
|
||
Retry
|
||
</button>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|