Empty

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