refactor: adjust setting dialog component

src/components/base/base-dialog.tsx

@@ -0,0 +1,66 @@
+import { forwardRef, ReactNode, useImperativeHandle, useState } from "react";
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  type SxProps,
+  type Theme,
+} from "@mui/material";
+
+interface Props {
+  title: ReactNode;
+  open: boolean;
+  okBtn?: ReactNode;
+  cancelBtn?: ReactNode;
+  disableOk?: boolean;
+  disableCancel?: boolean;
+  disableFooter?: boolean;
+  contentSx?: SxProps<Theme>;
+  onOk?: () => void;
+  onCancel?: () => void;
+  onClose?: () => void;
+}
+
+export interface DialogRef {
+  open: () => void;
+  close: () => void;
+}
+
+export const BaseDialog: React.FC<Props> = (props) => {
+  const {
+    open,
+    title,
+    children,
+    okBtn,
+    cancelBtn,
+    contentSx,
+    disableCancel,
+    disableOk,
+    disableFooter,
+  } = props;
+
+  return (
+    <Dialog open={open} onClose={props.onClose}>
+      <DialogTitle>{title}</DialogTitle>
+
+      <DialogContent sx={contentSx}>{children}</DialogContent>
+
+      {!disableFooter && (
+        <DialogActions>
+          {!disableCancel && (
+            <Button variant="outlined" onClick={props.onCancel}>
+              {cancelBtn}
+            </Button>
+          )}
+          {!disableOk && (
+            <Button variant="contained" onClick={props.onOk}>
+              {okBtn}
+            </Button>
+          )}
+        </DialogActions>
+      )}
+    </Dialog>
+  );
+};