From 296e149391875426a444fccc18a7facc6a81fa73 Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Fri, 8 Mar 2024 15:29:06 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style:=20update=20confirm=20dial?=
 =?UTF-8?q?og=20to=20use=20custom=20modal=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/shared/ConfirmDialog.tsx   | 56 ++++++-------------
 1 file changed, 16 insertions(+), 40 deletions(-)

diff --git a/packages/frontend/src/components/shared/ConfirmDialog.tsx b/packages/frontend/src/components/shared/ConfirmDialog.tsx
index 1de20e98..9a943d54 100644
--- a/packages/frontend/src/components/shared/ConfirmDialog.tsx
+++ b/packages/frontend/src/components/shared/ConfirmDialog.tsx
@@ -1,16 +1,10 @@
 import React from 'react';
 
 import { color } from '@material-tailwind/react/types/components/button';
-import {
-  Typography,
-  Button,
-  Dialog,
-  DialogHeader,
-  DialogBody,
-  DialogFooter,
-} from '@material-tailwind/react';
+import { Modal, ModalProps } from './Modal';
+import { Button } from './Button';
 
-type ConfirmDialogProp = {
+type ConfirmDialogProp = ModalProps & {
   children: React.ReactNode;
   dialogTitle: string;
   open: boolean;
@@ -23,42 +17,24 @@ type ConfirmDialogProp = {
 const ConfirmDialog = ({
   children,
   dialogTitle,
-  open,
   handleOpen,
   confirmButtonTitle,
   handleConfirm,
-  color,
+  ...props
 }: ConfirmDialogProp) => {
   return (
-    <Dialog open={open} handler={handleOpen} placeholder={''}>
-      <DialogHeader className="flex justify-between" placeholder={''}>
-        <Typography variant="h6" placeholder={''}>
-          {dialogTitle}{' '}
-        </Typography>
-        <Button
-          variant="outlined"
-          onClick={handleOpen}
-          className=" rounded-full"
-          placeholder={''}
-        >
-          X
-        </Button>
-      </DialogHeader>
-      <DialogBody placeholder={''}>{children}</DialogBody>
-      <DialogFooter className="flex justify-start gap-2" placeholder={''}>
-        <Button variant="outlined" onClick={handleOpen} placeholder={''}>
-          Cancel
-        </Button>
-        <Button
-          variant="gradient"
-          color={color}
-          onClick={handleConfirm}
-          placeholder={''}
-        >
-          {confirmButtonTitle}
-        </Button>
-      </DialogFooter>
-    </Dialog>
+    <Modal {...props}>
+      <Modal.Content>
+        <Modal.Header>{dialogTitle}</Modal.Header>
+        <Modal.Body>{children}</Modal.Body>
+        <Modal.Footer className="flex justify-start gap-2">
+          <Button variant="tertiary" onClick={handleOpen}>
+            Cancel
+          </Button>
+          <Button onClick={handleConfirm}>{confirmButtonTitle}</Button>
+        </Modal.Footer>
+      </Modal.Content>
+    </Modal>
   );
 };