Add Dashboard

apps/builder/components/modals/ConfirmModal.tsx

@@ -0,0 +1,77 @@
+import { useRef, useState } from 'react'
+import {
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  Button,
+} from '@chakra-ui/react'
+
+type ConfirmDeleteModalProps = {
+  isOpen: boolean
+  onConfirm: () => Promise<unknown>
+  onClose: () => void
+  message: JSX.Element
+  title?: string
+  confirmButtonLabel: string
+  confirmButtonColor?: 'blue' | 'red'
+}
+
+export const ConfirmModal = ({
+  title,
+  message,
+  isOpen,
+  onClose,
+  confirmButtonLabel,
+  onConfirm,
+  confirmButtonColor = 'red',
+}: ConfirmDeleteModalProps) => {
+  const [confirmLoading, setConfirmLoading] = useState(false)
+  const cancelRef = useRef(null)
+
+  const onConfirmClick = async () => {
+    setConfirmLoading(true)
+    try {
+      await onConfirm()
+    } catch (e) {
+      setConfirmLoading(false)
+      return setConfirmLoading(false)
+    }
+    setConfirmLoading(false)
+    onClose()
+  }
+
+  return (
+    <AlertDialog
+      isOpen={isOpen}
+      leastDestructiveRef={cancelRef}
+      onClose={onClose}
+    >
+      <AlertDialogOverlay>
+        <AlertDialogContent>
+          <AlertDialogHeader fontSize="lg" fontWeight="bold">
+            {title ?? 'Are you sure?'}
+          </AlertDialogHeader>
+
+          <AlertDialogBody>{message}</AlertDialogBody>
+
+          <AlertDialogFooter>
+            <Button ref={cancelRef} onClick={onClose} colorScheme="gray">
+              Cancel
+            </Button>
+            <Button
+              colorScheme={confirmButtonColor}
+              onClick={onConfirmClick}
+              ml={3}
+              isLoading={confirmLoading}
+            >
+              {confirmButtonLabel}
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialogOverlay>
+    </AlertDialog>
+  )
+}