Empty

1import * as React from "react";
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        "relative flex min-h-72 w-full flex-col items-center justify-center overflow-hidden rounded-3xl border border-dashed border-foreground/16 bg-foreground/[.018] px-6 py-12 text-center before:pointer-events-none before:absolute before:inset-x-1/4 before:top-0 before:h-px before:bg-gradient-to-r before:from-transparent before:via-primary/65 before:to-transparent",
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 
28function EmptyMedia({
29  className,
30  variant = "default",
31  ...props
32}: React.ComponentProps<"div"> & { variant?: "default" | "icon" }) {
33  return (
34    <div
35      data-slot="empty-media"
36      data-variant={variant}
37      className={cn(
38        "mb-3 flex items-center justify-center text-muted-foreground data-[variant=icon]:size-13 data-[variant=icon]:rounded-2xl data-[variant=icon]:border data-[variant=icon]:border-foreground/10 data-[variant=icon]:bg-background data-[variant=icon]:text-foreground data-[variant=icon]:shadow-[0_12px_30px_-20px_var(--foreground),inset_0_1px_0_color-mix(in_oklch,var(--background)_80%,transparent)] data-[variant=icon]:[&_svg]:size-5",
39        className,
40      )}
41      {...props}
42    />
43  );
44}
45 
46function EmptyTitle({ className, ...props }: React.ComponentProps<"h3">) {
47  return (
48    <h3
49      data-slot="empty-title"
50      className={cn("text-lg font-semibold tracking-[-0.03em]", className)}
51      {...props}
52    />
53  );
54}
55 
56function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
57  return (
58    <p
59      data-slot="empty-description"
60      className={cn("text-sm leading-relaxed text-muted-foreground", className)}
61      {...props}
62    />
63  );
64}
65 
66function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
67  return (
68    <div
69      data-slot="empty-content"
70      className={cn(
71        "mt-6 flex w-full max-w-sm flex-col items-center gap-3",
72        className,
73      )}
74      {...props}
75    />
76  );
77}
78 
79export {
80  Empty,
81  EmptyContent,
82  EmptyDescription,
83  EmptyHeader,
84  EmptyMedia,
85  EmptyTitle,
86};