File size: 1,620 Bytes
f1dd159 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | import { AlertCircle, Inbox } from "lucide-react";
import { useTranslation } from "react-i18next";
import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/spinner";
import { TableCell, TableRow } from "@/components/ui/table";
import { cn } from "@/shared/lib/cn";
export function LoadingState({ className }: { className?: string }) {
return (
<div className={cn("flex min-h-44 items-center justify-center", className)}>
<Spinner className="size-5" />
</div>
);
}
export function TableLoadingRow({ colSpan }: { colSpan: number }) {
return (
<TableRow className="hover:bg-transparent">
<TableCell colSpan={colSpan} className="p-0">
<LoadingState className="min-h-40" />
</TableCell>
</TableRow>
);
}
export function EmptyState({ message }: { message?: string }) {
const { t } = useTranslation();
return (
<div className="flex min-h-44 flex-col items-center justify-center gap-2 text-center text-muted-foreground">
<Inbox className="size-7 stroke-1" />
<p className="text-sm">{message ?? t("common.noData")}</p>
</div>
);
}
export function ErrorState({ message, onRetry }: { message: string; onRetry: () => void }) {
const { t } = useTranslation();
return (
<div className="flex min-h-44 flex-col items-center justify-center gap-3 text-center">
<AlertCircle className="size-7 text-destructive" />
<p className="max-w-md text-sm text-muted-foreground">{message}</p>
<Button type="button" variant="secondary" size="sm" onClick={onRetry}>{t("common.retry")}</Button>
</div>
);
}
|