Empty

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