Add useConfirm hook for confirmation dialogs with modal support

Author: impruthvi

src/hooks/use-confirm.tsx

@@ -0,0 +1,72 @@
+import { useState } from "react";
+
+import { Button, type ButtonProps } from "@/components/ui/button";
+import { ResponsiveModal } from "@/components/responsive-modal";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+export const useConfirm = (
+  title: string,
+  message: string,
+  variant: ButtonProps["variant"] = "primary"
+): [() => JSX.Element, () => Promise<unknown>] => {
+  const [promise, setPromise] = useState<{
+    resolve: (value: boolean) => void;
+  } | null>(null);
+
+  const confirm = () => {
+    return new Promise((resolve) => {
+      setPromise({ resolve });
+    });
+  };
+
+  const handleClose = () => {
+    setPromise(null);
+  };
+
+  const handleConfirm = () => {
+    promise?.resolve(true);
+    handleClose();
+  };
+
+  const handleCancel = () => {
+    promise?.resolve(false);
+    handleClose();
+  };
+
+  const ConfirmDialog = () => (
+    <ResponsiveModal open={promise !== null} onOpenChange={handleClose}>
+      <Card className="w-full h-full border-none shadow-none">
+        <CardContent className="pt-8">
+          <CardHeader className="p-0">
+            <CardTitle>{title}</CardTitle>
+            <CardDescription>{message}</CardDescription>
+          </CardHeader>
+          <div className="pt-4 w-full flex flex-col gap-y-2 lg:flex-row gap-x-2 items-center justify-end ">
+            <Button
+              onClick={handleCancel}
+              variant={"outline"}
+              className="w-full lg:w-auto"
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleConfirm}
+              variant={variant}
+              className="w-full lg:w-auto"
+            >
+              Confirm
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </ResponsiveModal>
+  );
+
+  return [ConfirmDialog, confirm];
+};

tailwind.config.ts

@@ -7,6 +7,7 @@ const config: Config = {
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/features/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/hooks/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
   	extend: {