Empty

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