8-bit Empty

1"use client";
2 
3import { type VariantProps, cva } from "class-variance-authority";
4 
5import { cn } from "@/lib/utils";
6 
7import "@/components/ui/8bit/styles/retro.css";
8 
9const emptyMediaVariants = cva(
10  "flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
11  {
12    variants: {
13      variant: {
14        default: "bg-transparent",
15        icon: "relative bg-muted text-foreground flex size-12 shrink-0 items-center justify-center",
16      },
17      font: {
18        normal: "",
19        retro: "retro",
20      },
21    },
22    defaultVariants: {
23      variant: "default",
24      font: "retro",
25    },
26  }
27);
28 
29function Empty({
30  className,
31  font,
32  ...props
33}: React.ComponentProps<"div"> & { font?: "normal" | "retro" }) {
34  return (
35    <div
36      data-slot="empty"
37      className={cn(
38        "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",
39        font !== "normal" && "retro",
40        className
41      )}
42      {...props}
43    />
44  );
45}
46 
47function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
48  return (
49    <div
50      data-slot="empty-header"
51      className={cn(
52        "flex max-w-sm flex-col items-center gap-2 text-center",
53        className
54      )}
55      {...props}
56    />
57  );
58}
59 
60function EmptyMedia({
61  className,
62  variant = "default",
63  ...props
64}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
65  return (
66    <div className={cn("relative size-max", className)}>
67      <div
68        data-slot="empty-icon"
69        data-variant={variant}
70        className={cn(emptyMediaVariants({ variant, className }))}
71        {...props}
72      />
73      {variant !== "default" && (
74        <>
75          <div className="absolute top-0 left-0 w-full h-1.5 bg-foreground dark:bg-ring pointer-events-none" />
76          <div className="absolute bottom-0 w-full h-1.5 bg-foreground dark:bg-ring pointer-events-none" />
77          <div className="absolute top-1.5 -left-1.5 w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none" />
78          <div className="absolute bottom-1.5 -left-1.5 w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none" />
79          <div className="absolute top-1.5 -right-1.5 w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none" />
80          <div className="absolute bottom-1.5 -right-1.5 w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none" />
81        </>
82      )}
83    </div>
84  );
85}
86 
87// … truncated