From ca0cc8485d4ac894f25e07d03f2d03990db69add Mon Sep 17 00:00:00 2001
From: Paul Miller <paul@paul.lol>
Date: Thu, 20 Apr 2023 10:01:52 -0500
Subject: [PATCH] confirm dialog

---
 src/components/Dialog.tsx | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 src/components/Dialog.tsx

diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx
new file mode 100644
index 0000000..e206deb
--- /dev/null
+++ b/src/components/Dialog.tsx
@@ -0,0 +1,31 @@
+import { Dialog } from "@kobalte/core";
+import { ParentComponent } from "solid-js";
+import { Button, SmallHeader } from "./layout";
+
+const OVERLAY = "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+const DIALOG_POSITIONER = "fixed inset-0 z-50 flex items-center justify-center"
+const DIALOG_CONTENT = "w-[80vw] max-w-[400px] p-4 bg-gray/50 backdrop-blur-md shadow-xl rounded-xl border border-white/10"
+
+export const ConfirmDialog: ParentComponent<{ isOpen: boolean; loading: boolean; onCancel: () => void, onConfirm: () => void }> = (props) => {
+    return (
+        <Dialog.Root isOpen={props.isOpen} onOpenChange={props.onCancel}>
+            <Dialog.Portal>
+                <Dialog.Overlay class={OVERLAY} />
+                <div class={DIALOG_POSITIONER}>
+                    <Dialog.Content class={DIALOG_CONTENT}>
+                        <div class="flex justify-between mb-2">
+                            <Dialog.Title><SmallHeader>Are you sure?</SmallHeader></Dialog.Title>
+                        </div>
+                        <Dialog.Description class="flex flex-col gap-4">
+                            {props.children}
+                            <div class="flex gap-4 w-full justify-end">
+                                <Button onClick={props.onCancel}>Cancel</Button>
+                                <Button intent="red" onClick={props.onConfirm} loading={props.loading} disabled={props.loading}>Confirm</Button>
+                            </div>
+                        </Dialog.Description>
+                    </Dialog.Content>
+                </div>
+            </Dialog.Portal>
+        </Dialog.Root >
+    )
+}
\ No newline at end of file