Empty

1import { cva, type VariantProps } from "class-variance-authority";2import { cn } from "@/lib/utils";3import { sprawlify } from "@sprawlify/solid";4import { splitProps, type ComponentProps } from "solid-js";56function Empty(props: ComponentProps<typeof sprawlify.div>) {7  const [local, others] = splitProps(props, ["class"]);89  return (10    <sprawlify.div11      data-scope="empty"12      data-part="root"13      data-slot="empty"14      class={cn(15        "gap-4 rounded-xl border-dashed p-6 flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance",16        local.class,17      )}18      {...others}19    />20  );21}2223function EmptyHeader(props: ComponentProps<typeof sprawlify.div>) {24  const [local, others] = splitProps(props, ["class"]);2526  return (27    <sprawlify.div28      data-slot="empty-header"29      class={cn("gap-2 flex max-w-sm flex-col items-center", local.class)}30      {...others}31    />32  );33}3435const emptyMediaVariants = cva(36  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",37  {38    variants: {39      variant: {40        default: "bg-transparent",41        icon: "bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-4",42      },43    },44    defaultVariants: {45      variant: "default",46    },47  },48);4950function EmptyMedia(51  props: ComponentProps<typeof sprawlify.div> &52    VariantProps<typeof emptyMediaVariants> & { variant?: "default" | "icon" },53) {54  const [local, others] = splitProps(props, ["class", "variant"]);55  const variant = () => local.variant || "default";5657  return (58    <sprawlify.div59      data-slot="empty-icon"60      data-variant={variant()}61      class={cn(emptyMediaVariants({ variant: variant(), class: local.class }))}62      {...others}63    />64  );65}6667function EmptyTitle(props: ComponentProps<typeof sprawlify.div>) {68  const [local, others] = splitProps(props, ["class"]);6970  return (71    <sprawlify.div72      data-slot="empty-title"73      class={cn("text-sm font-medium tracking-tight", local.class)}74      {...others}75    />76  );77}7879function EmptyDescription(props: ComponentProps<typeof sprawlify.p>) {80  const [local, others] = splitProps(props, ["class"]);8182  return (83    <sprawlify.p84      data-slot="empty-description"85      class={cn(86        "text-sm/relaxed text-muted-foreground [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",87        local.class,88      )}89      {...others}90    />91  );92}9394function EmptyContent(props: ComponentProps<typeof sprawlify.div>) {95  const [local, others] = splitProps(props, ["class"]);9697  return (98    <sprawlify.div99      data-slot="empty-content"100      class={cn(101        "gap-2.5 text-sm flex w-full max-w-sm min-w-0 flex-col items-center text-balance",102        local.class,103      )}104      {...others}105    />106  );107}108109export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia };110