empty

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