Empty

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