- Bulk replace text-white → text-foreground across 116 component files (preserving text-white/ opacity variants) - Remove hover-glow-cyan, shadow-card-glow-cyan, shadow-button-primary-glow classes from all components - Replace --duration-normal/--duration-immersive/--duration-slow with --sumi-duration-normal/--sumi-duration-slow across 130+ files - Replace --ease-out/--ease-in-out with --sumi-ease-out/--sumi-ease-in-out - Replace focus:ring-blue-500 → focus:ring-primary (4 files) - Remove hover:scale-105/110 and hover:-translate-y-1/0.5 transforms (SUMI anti-pattern: no scale on hover) - Clean up stale kodo- references in comments 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(--sumi-duration-normal)]">
|
|
<div className="bg-card/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-destructive/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>
|
|
);
|
|
}
|