45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import { Inbox } from "lucide-react";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface EmptyCardProps {
|
|
message?: string;
|
|
description?: string;
|
|
icon?: React.ReactNode;
|
|
className?: string;
|
|
/** Render as a compact inline row instead of a full card */
|
|
inline?: boolean;
|
|
}
|
|
|
|
export function EmptyCard({
|
|
message = "No data available",
|
|
description,
|
|
icon,
|
|
className,
|
|
inline = false,
|
|
}: EmptyCardProps) {
|
|
if (inline) {
|
|
return (
|
|
<div className={cn("flex items-center gap-2 text-sm text-muted-foreground", className)}>
|
|
{icon ?? <Inbox className="w-4 h-4 shrink-0" />}
|
|
<span>{message}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Card className={cn("border-dashed", className)}>
|
|
<CardContent className="flex flex-col items-center justify-center gap-3 py-10 text-center">
|
|
<div className="text-muted-foreground/40">
|
|
{icon ?? <Inbox className="w-8 h-8" />}
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-medium text-muted-foreground">{message}</p>
|
|
{description && (
|
|
<p className="text-xs text-muted-foreground/60 mt-1">{description}</p>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|