61 lines
1.7 KiB
TypeScript
61 lines
1.7 KiB
TypeScript
import type { ReactNode } from 'react';
|
|
|
|
export interface ErrorPageProps {
|
|
title?: string;
|
|
message?: string;
|
|
onRetry?: () => void;
|
|
className?: string;
|
|
}
|
|
|
|
export function ErrorPage({
|
|
title = 'Something went wrong',
|
|
message = 'An unexpected error occurred. Please try again.',
|
|
onRetry,
|
|
className = '',
|
|
}: ErrorPageProps): ReactNode {
|
|
return (
|
|
<div className={`flex flex-col items-center justify-center min-h-[400px] p-8 ${className}`}>
|
|
<div
|
|
className="w-16 h-16 rounded-full flex items-center justify-center mb-4"
|
|
style={{ backgroundColor: 'var(--color-destructive-muted, #fef2f2)' }}
|
|
>
|
|
<svg
|
|
className="w-8 h-8"
|
|
style={{ color: 'var(--color-destructive, #ef4444)' }}
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<h2
|
|
className="text-xl font-semibold mb-2"
|
|
style={{ color: 'var(--color-foreground, #111827)' }}
|
|
>
|
|
{title}
|
|
</h2>
|
|
<p
|
|
className="text-center max-w-md mb-6"
|
|
style={{ color: 'var(--color-muted-foreground, #6b7280)' }}
|
|
>
|
|
{message}
|
|
</p>
|
|
{onRetry && (
|
|
<button
|
|
onClick={onRetry}
|
|
className="px-4 py-2 rounded-lg transition-colors text-white"
|
|
style={{ backgroundColor: 'var(--color-primary, #2563eb)' }}
|
|
>
|
|
Try Again
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|