veza/apps/web/src/components/ui/lazy-component/LazyErrorFallback.tsx
senke 73e8372b0e refactor: Phase 7 — Clean up legacy components and remove dead tokens
- 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>
2026-02-12 02:09:29 +01:00

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>
);
}