37 lines
1.2 KiB
JavaScript
37 lines
1.2 KiB
JavaScript
import { AlertTriangle, Inbox, RefreshCw } from "lucide-react";
|
||
import { Button } from "./Button";
|
||
|
||
export function Skeleton({ className = "" }) {
|
||
return <div className={`animate-pulse rounded-md bg-line/60 ${className}`} />;
|
||
}
|
||
|
||
export function EmptyState({ title, text }) {
|
||
return (
|
||
<div className="rounded-lg border border-dashed border-line bg-surface p-10 text-center">
|
||
<Inbox className="mx-auto mb-4 size-8 text-muted" />
|
||
<h3 className="font-serif text-xl">{title}</h3>
|
||
<p className="mx-auto mt-2 max-w-md text-sm text-muted">{text}</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export function ErrorState({ retry }) {
|
||
return (
|
||
<div className="rounded-lg border border-danger/25 bg-danger-soft p-8 text-center">
|
||
<AlertTriangle className="mx-auto mb-3 size-7 text-danger" />
|
||
<h3 className="font-semibold">Не удалось загрузить данные</h3>
|
||
<p className="mt-1 text-sm text-muted">Проверьте соединение и попробуйте еще раз.</p>
|
||
{retry && (
|
||
<Button
|
||
className="mt-4"
|
||
variant="secondary"
|
||
icon={<RefreshCw className="size-4" />}
|
||
onClick={retry}
|
||
>
|
||
Повторить
|
||
</Button>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|