Pixelact Empty

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