35
apps/console/src/pages/ErrorPage.tsx
Normal file
35
apps/console/src/pages/ErrorPage.tsx
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
import { AlertCircle } from "lucide-react";
|
||||||
|
import { Link } from "react-router";
|
||||||
|
|
||||||
|
export interface ErrorPageProps {
|
||||||
|
error?: Error;
|
||||||
|
title?: string;
|
||||||
|
description?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ErrorPage({
|
||||||
|
error,
|
||||||
|
title = "Something went wrong",
|
||||||
|
description = "An unexpected error occurred. Please try again later.",
|
||||||
|
}: ErrorPageProps) {
|
||||||
|
return (
|
||||||
|
<div className="flex h-full flex-1 flex-col items-center justify-center p-8 text-center">
|
||||||
|
<div className="mb-4 rounded-full bg-destructive/10 p-3 text-destructive">
|
||||||
|
<AlertCircle className="size-6" />
|
||||||
|
</div>
|
||||||
|
<h1 className="mb-2 text-2xl font-semibold">{title}</h1>
|
||||||
|
<p className="mb-6 max-w-md text-muted-foreground">{description}</p>
|
||||||
|
{error?.message && (
|
||||||
|
<pre className="mb-8 max-w-2xl overflow-auto rounded-lg bg-muted/50 p-4 text-sm">
|
||||||
|
{error.message}
|
||||||
|
</pre>
|
||||||
|
)}
|
||||||
|
<Link
|
||||||
|
to="/"
|
||||||
|
className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
|
||||||
|
>
|
||||||
|
Return Home
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user