50 lines
1.9 KiB
TypeScript
50 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
export default function GlobalError({
|
|
error,
|
|
reset,
|
|
}: {
|
|
error: Error & { digest?: string };
|
|
reset: () => void;
|
|
}) {
|
|
return (
|
|
<html lang="en">
|
|
<body className="bg-background text-foreground">
|
|
<main className="relative min-h-screen overflow-hidden">
|
|
<div className="pointer-events-none absolute inset-0">
|
|
<div className="absolute -left-24 top-0 h-64 w-64 rounded-full bg-destructive/15 blur-3xl" />
|
|
<div className="absolute right-0 bottom-0 h-80 w-80 rounded-full bg-primary/20 blur-3xl" />
|
|
</div>
|
|
|
|
<div className="relative mx-auto flex min-h-screen w-full max-w-3xl flex-col items-center justify-center gap-6 px-6 py-16 text-center">
|
|
<div className="rounded-full border border-border/60 bg-card px-4 py-1 text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
|
|
Critical error
|
|
</div>
|
|
<h1 className="text-4xl font-semibold tracking-tight text-foreground sm:text-5xl">
|
|
We could not recover.
|
|
</h1>
|
|
<p className="text-base text-muted-foreground">
|
|
A global error occurred. Try again or return home.
|
|
</p>
|
|
<div className="flex flex-wrap items-center justify-center gap-3">
|
|
<Button size="lg" onClick={reset}>
|
|
Retry
|
|
</Button>
|
|
<Button asChild size="lg" variant="outline">
|
|
<Link href="/">Go home</Link>
|
|
</Button>
|
|
</div>
|
|
<div className="rounded-2xl border border-border/60 bg-card/70 px-4 py-3 text-xs text-muted-foreground">
|
|
{error.digest ? `Error ID: ${error.digest}` : "Unexpected error"}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|