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 w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded border-2 bg-card p-6 text-center text-balance",
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("flex max-w-sm flex-col items-center gap-2", 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: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4",
35      },
36    },
37    defaultVariants: {
38      variant: "default",
39    },
40  }
41)
42 
43function EmptyMedia({
44  className,
45  variant = "default",
46  ...props
47}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
48  return (
49    <div
50      data-slot="empty-icon"
51      data-variant={variant}
52      className={cn(emptyMediaVariants({ variant, className }))}
53      {...props}
54    />
55  )
56}
57 
58function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
59  return (
60    <div
61      data-slot="empty-title"
62      className={cn(
63        "cn-font-heading text-sm font-medium tracking-tight",
64        className
65      )}
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-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
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-2.5 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}