1import { cva, type VariantProps } from "class-variance-authority";
2
3import { cn } from "~/lib/utils";
4
5// Size sets how much room the state claims and how large its title reads:
6// "compact" is a card-sized notice, "hero" fills a whole route.
7const emptySizeClassName = {
8 compact:
9 "min-h-64 gap-4 p-6 md:p-10 [&_[data-slot=empty-media]]:mb-0 [&_[data-slot=empty-title]]:text-[1.0625rem] [&_[data-slot=empty-title]]:leading-6 [&_[data-slot=empty-description]]:text-[0.8125rem] [&_[data-slot=empty-description]]:leading-[1.125rem]",
10 default: "gap-6 p-6 md:p-12",
11 hero: "gap-6 p-6 md:p-12 [&_[data-slot=empty-title]]:text-2xl sm:[&_[data-slot=empty-title]]:text-3xl",
12} as const;
13
14function Empty({
15 className,
16 size = "default",
17 ...props
18}: React.ComponentProps<"div"> & { size?: keyof typeof emptySizeClassName }) {
19 return (
20 <div
21 className={cn(
22 "flex min-w-0 flex-1 flex-col items-center justify-center text-balance text-center",
23 emptySizeClassName[size],
24 className,
25 )}
26 data-slot="empty"
27 {...props}
28 />
29 );
30}
31
32function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
33 return (
34 <div
35 className={cn("flex max-w-sm flex-col items-center text-center", className)}
36 data-slot="empty-header"
37 {...props}
38 />
39 );
40}
41
42const emptyMediaVariants = cva(
43 "flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
44 {
45 defaultVariants: {
46 variant: "default",
47 },
48 variants: {
49 variant: {
50 default: "bg-transparent",
51 icon: "relative flex size-9 shrink-0 items-center justify-center rounded-md border bg-card not-dark:bg-clip-padding text-foreground shadow-sm/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='size-'])]:size-4.5",
52 },
53 },
54 },
55);
56
57function EmptyMedia({
58 className,
59 variant = "default",
60 ...props
61}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
62 return (
63 <div
64 className={cn("relative mb-6", className)}
65 data-slot="empty-media"
66 data-variant={variant}
67 {...props}
68 >
69 {variant === "icon" && (
70 <>
71 <div
72 aria-hidden="true"
73 className={cn(
74 emptyMediaVariants({ className, variant }),
75 "-translate-x-0.5 -rotate-10 pointer-events-none absolute bottom-px origin-bottom-left scale-84 shadow-none",
76 )}
77 />
78 <div
79 aria-hidden="true"
80 className={cn(
81 emptyMediaVariants({ className, variant }),
82 "pointer-events-none absolute bottom-px origin-bottom-right translate-x-0.5 rotate-10 scale-84 shadow-none",
83 )}
84 />
85 </>
86 )}
87 <div className={cn(emptyMediaVariants({ className, variant }))} {...props} />
88 </div>
89 );
90}
91
92function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
93 return (
94 <div className={cn("font-semibold text-xl", className)} data-slot="empty-title" {...props} />
95 );
96}
97
98function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
99 return (
100 <div
101 className={cn(
102 "text-muted-foreground text-sm [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4 [[data-slot=empty-title]+&]:mt-1 [[data-slot=empty-description]+&]:mt-1",
103 className,
104 )}
105 data-slot="empty-description"
106 {...props}
107 />
108 );
109}
110
111function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
112 return (
113 <div
114 className={cn(
115 "flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm",
116 className,
117 )}
118 data-slot="empty-content"
119 {...props}
120 />
121 );
122}
123
124export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia };