Empty

1import { cva } from "class-variance-authority";
2 
3import { cn } from "@/lib/utils";
4 
5function Empty({ className = "", ...props }) {
6	return (
7		<div
8			data-slot="empty"
9			className={cn(
10				"gap-4 rounded-xl border-dashed p-6 flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance",
11				className,
12			)}
13			{...props}
14		/>
15	);
16}
17 
18function EmptyHeader({ className = "", ...props }) {
19	return (
20		<div
21			data-slot="empty-header"
22			className={cn("gap-1 flex max-w-sm flex-col items-center", className)}
23			{...props}
24		/>
25	);
26}
27 
28const emptyMediaVariants = cva(
29	"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
30	{
31		variants: {
32			variant: {
33				default: "bg-transparent",
34				icon: "bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-md [&_svg:not([class*='size-'])]:size-4",
35			},
36		},
37		defaultVariants: {
38			variant: "default",
39		},
40	},
41);
42 
43function EmptyMedia({ className = "", variant = "default", ...props }) {
44	return (
45		<div
46			data-slot="empty-icon"
47			data-variant={variant}
48			className={cn(emptyMediaVariants({ variant, className }))}
49			{...props}
50		/>
51	);
52}
53 
54function EmptyTitle({ className = "", ...props }) {
55	return (
56		<div
57			data-slot="empty-title"
58			className={cn("text-sm font-medium tracking-tight", className)}
59			{...props}
60		/>
61	);
62}
63 
64function EmptyDescription({ className = "", ...props }) {
65	return (
66		<div
67			data-slot="empty-description"
68			className={cn(
69				"text-xs/relaxed text-muted-foreground [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
70				className,
71			)}
72			{...props}
73		/>
74	);
75}
76 
77function EmptyContent({ className = "", ...props }) {
78	return (
79		<div
80			data-slot="empty-content"
81			className={cn(
82				"gap-2 text-xs/relaxed flex w-full max-w-sm min-w-0 flex-col items-center text-balance",
83				className,
84			)}
85			{...props}
86		/>
87	);
88}
89 
90Empty.displayName = "Empty";
91EmptyHeader.displayName = "EmptyHeader";
92EmptyTitle.displayName = "EmptyTitle";
93EmptyDescription.displayName = "EmptyDescription";
94EmptyContent.displayName = "EmptyContent";
95EmptyMedia.displayName = "EmptyMedia";
96 
97export {
98	Empty,
99	EmptyHeader,
100	EmptyTitle,
101	EmptyDescription,
102	EmptyContent,
103	EmptyMedia,
104};