Alert Dialog

1import { AlertDialog as KobalteAlertDialog } from "@kobalte/core/alert-dialog";
2import type { Component, ComponentProps, JSX } from "solid-js";
3import { splitProps } from "solid-js";
4import { cn } from "~/lib/utils";
5 
6const AlertDialog = KobalteAlertDialog;
7const AlertDialogTrigger = KobalteAlertDialog.Trigger;
8 
9const AlertDialogOverlay: Component<ComponentProps<typeof KobalteAlertDialog.Overlay>> = (
10  props,
11) => {
12  const [local, rest] = splitProps(props, ["class"]);
13  return (
14    <KobalteAlertDialog.Overlay
15      class={cn(
16        "fixed inset-0 z-50 bg-black/80",
17        "data-[expanded]:animate-in data-[closed]:animate-out",
18        "data-[closed]:fade-out-0 data-[expanded]:fade-in-0",
19        local.class,
20      )}
21      {...rest}
22    />
23  );
24};
25 
26const AlertDialogContent: Component<ComponentProps<typeof KobalteAlertDialog.Content>> = (
27  props,
28) => {
29  const [local, rest] = splitProps(props, ["class", "children"]);
30  return (
31    <KobalteAlertDialog.Portal>
32      <AlertDialogOverlay />
33      <KobalteAlertDialog.Content
34        class={cn(
35          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%]",
36          "gap-4 border bg-background p-6 shadow-lg duration-200 sm:rounded-lg",
37          "data-[expanded]:animate-in data-[closed]:animate-out",
38          "data-[closed]:fade-out-0 data-[expanded]:fade-in-0",
39          "data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95",
40          local.class,
41        )}
42        {...rest}
43      >
44        {local.children}
45      </KobalteAlertDialog.Content>
46    </KobalteAlertDialog.Portal>
47  );
48};
49 
50const AlertDialogHeader: Component<JSX.HTMLAttributes<HTMLDivElement>> = (props) => {
51  const [local, rest] = splitProps(props, ["class"]);
52  return (
53    <div class={cn("flex flex-col space-y-2 text-center sm:text-left", local.class)} {...rest} />
54  );
55};
56 
57const AlertDialogFooter: Component<JSX.HTMLAttributes<HTMLDivElement>> = (props) => {
58  const [local, rest] = splitProps(props, ["class"]);
59  return (
60    <div
61      class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", local.class)}
62      {...rest}
63    />
64  );
65};
66 
67const AlertDialogTitle: Component<ComponentProps<typeof KobalteAlertDialog.Title>> = (props) => {
68  const [local, rest] = splitProps(props, ["class"]);
69  return <KobalteAlertDialog.Title class={cn("text-lg font-semibold", local.class)} {...rest} />;
70};
71 
72// … truncated