ui empty-state.tsx

100% Statements 1/1

100% Branches 6/6

100% Functions 1/1

100% Lines 1/1

Press n or j to go to the next uncovered block, b, p or k for the previous block.


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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
191x
 
 
 
 
 
 
 
 
 
 
 
 
  import { cn } from "../../lib/utils";
import type { LucideIcon } from "lucide-react";
 
interface EmptyStateProps {
	icon?: LucideIcon;
	title: string;
	description?: string;
	className?: string;
	children?: React.ReactNode;
}
 
/**
 * Empty state component for when there's no data to display
 */
export function EmptyState({
	icon: Icon,
	title,
	description,
	className,
	children,
}: EmptyStateProps) {
	return (
		<div className={cn("text-center py-12", className)}>
			{Icon && (
				<Icon className="h-12 w-12 mx-auto text-foreground-subtle mb-4" />
			)}
			<h3 className="text-lg font-medium text-foreground-default">{title}</h3>
			{description && (
				<p className="mt-2 text-foreground-muted">{description}</p>
			)}
			{children && <div className="mt-4">{children}</div>}
		</div>
	);
}