Empty

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