f9ed6915fc
Replace remaining legacy semantic color tokens: - text-kodo-red → text-destructive (36 files, 50 instances): errors, deletions, validation, destructive actions - text-kodo-lime → text-success (36 files, 48 instances): success states, confirmations, positive indicators These tokens now adapt to theme changes instead of being hardcoded. Co-authored-by: Cursor <cursoragent@cursor.com>
59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
import { Button } from '../button';
|
|
import { AlertTriangle, RefreshCw } from 'lucide-react';
|
|
|
|
export interface LazyErrorFallbackProps {
|
|
pageName: string;
|
|
error?: Error;
|
|
onRetry?: () => void;
|
|
}
|
|
|
|
function getErrorMessage(error: Error | undefined): string {
|
|
try {
|
|
if (!error)
|
|
return 'Currently unable to access this component. Please check your connection.';
|
|
if (typeof error === 'string') return error;
|
|
if (error instanceof Error) return error.message;
|
|
return String(error);
|
|
} catch {
|
|
return 'An unknown error occurred.';
|
|
}
|
|
}
|
|
|
|
export function LazyErrorFallback({
|
|
pageName,
|
|
error,
|
|
onRetry,
|
|
}: LazyErrorFallbackProps) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center min-h-layout-page-sm p-8 text-center animate-in fade-in zoom-in duration-[var(--duration-normal)]">
|
|
<div className="bg-kodo-ink/50 border border-border/30 rounded-xl p-8 max-w-md w-full shadow-lg backdrop-blur-sm">
|
|
<div className="w-16 h-16 bg-kodo-red/10 rounded-full flex items-center justify-center mx-auto mb-6">
|
|
<AlertTriangle className="h-8 w-8 text-destructive" />
|
|
</div>
|
|
<h2 className="text-xl font-bold mb-2">Failed to load {pageName}</h2>
|
|
<p className="text-muted-foreground mb-6 text-sm">
|
|
{getErrorMessage(error)}
|
|
</p>
|
|
<div className="flex flex-col gap-3">
|
|
{onRetry && (
|
|
<Button
|
|
onClick={onRetry}
|
|
variant="outline"
|
|
className="w-full flex items-center justify-center gap-2"
|
|
>
|
|
<RefreshCw className="h-4 w-4" />
|
|
Try Again
|
|
</Button>
|
|
)}
|
|
<Button
|
|
onClick={() => window.location.reload()}
|
|
variant="default"
|
|
className="w-full flex items-center justify-center gap-2"
|
|
>
|
|
Refresh Page
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|