refactor: Extract the action confirming dialog into its own component

1 files changed, 48 insertions, 0 deletions

diff --git a/apps/web/components/ui/action-confirming-dialog.tsx b/apps/web/components/ui/action-confirming-dialog.tsx
new file mode 100644
index 00000000..980bdd60
--- /dev/null
+++ b/apps/web/components/ui/action-confirming-dialog.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { useState } from "react";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+
+import { Button } from "./button";
+
+export default function ActionConfirmingDialog({
+  title,
+  description,
+  actionButton,
+  children,
+}: {
+  title: React.ReactNode;
+  description: React.ReactNode;
+  actionButton: (setDialogOpen: (open: boolean) => void) => React.ReactNode;
+  children: React.ReactNode;
+}) {
+  const [isDialogOpen, setDialogOpen] = useState(false);
+
+  return (
+    <Dialog open={isDialogOpen} onOpenChange={setDialogOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+        {description}
+        <DialogFooter className="sm:justify-end">
+          <DialogClose asChild>
+            <Button type="button" variant="secondary">
+              Close
+            </Button>
+          </DialogClose>
+          {actionButton(setDialogOpen)}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}