34 lines
877 B
TypeScript
34 lines
877 B
TypeScript
|
import { AlertTriangle, RefreshCcw } from "lucide-react";
|
||
|
|
import { Button } from "./button/button";
|
||
|
|
|
||
|
|
type ErrorStateProps = {
|
||
|
|
message?: string;
|
||
|
|
onRetry?: () => void;
|
||
|
|
className?: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
export function ErrorState({ message, onRetry, className }: ErrorStateProps) {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={`mt-6 rounded-xl border border-red-200 bg-red-50 p-4 text-red-700 ${className}`}
|
||
|
|
>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<AlertTriangle className="h-5 w-5" />
|
||
|
|
<p className="font-medium">Gagal memuat data.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p className="mt-1 text-sm opacity-80">{message}</p>
|
||
|
|
|
||
|
|
{onRetry && (
|
||
|
|
<Button
|
||
|
|
onClick={onRetry}
|
||
|
|
size="sm"
|
||
|
|
className="mt-3 inline-flex items-center gap-2"
|
||
|
|
>
|
||
|
|
<RefreshCcw className="h-4 w-4" /> Coba lagi
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|