54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
import { AlertTriangle, RefreshCw } from "lucide-react";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface ErrorCardProps {
|
|
message?: string;
|
|
onRetry?: () => void;
|
|
className?: string;
|
|
/** Render as a compact inline row instead of a full card */
|
|
inline?: boolean;
|
|
}
|
|
|
|
export function ErrorCard({
|
|
message = "Failed to load data.",
|
|
onRetry,
|
|
className,
|
|
inline = false,
|
|
}: ErrorCardProps) {
|
|
if (inline) {
|
|
return (
|
|
<div className={cn("flex items-center gap-2 text-sm text-muted-foreground", className)}>
|
|
<AlertTriangle className="w-4 h-4 text-amber-400 shrink-0" />
|
|
<span>{message}</span>
|
|
{onRetry && (
|
|
<button
|
|
onClick={onRetry}
|
|
className="text-xs underline underline-offset-2 hover:text-foreground transition-colors"
|
|
>
|
|
Retry
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Card className={cn("border-destructive/30 bg-destructive/5", className)}>
|
|
<CardContent className="flex flex-col items-center justify-center gap-3 py-10 text-center">
|
|
<AlertTriangle className="w-8 h-8 text-destructive/70" />
|
|
<div>
|
|
<p className="text-sm font-medium text-foreground">Something went wrong</p>
|
|
<p className="text-xs text-muted-foreground mt-1">{message}</p>
|
|
</div>
|
|
{onRetry && (
|
|
<Button variant="outline" size="sm" onClick={onRetry} className="gap-2 mt-1">
|
|
<RefreshCw className="w-3.5 h-3.5" />
|
|
Try again
|
|
</Button>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|