Fix dialog typo.

1 files changed, 43 insertions, 0 deletions

diff --git a/FrontEnd/src/views/common/dialog/ConfirmDialog.tsx b/FrontEnd/src/views/common/dialog/ConfirmDialog.tsx
new file mode 100644
index 00000000..8c2cea5a
--- /dev/null
+++ b/FrontEnd/src/views/common/dialog/ConfirmDialog.tsx
@@ -0,0 +1,43 @@
+import { convertI18nText, I18nText } from "@/common";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+
+import Button from "../button/Button";
+import Dialog from "./Dialog";
+
+const ConfirmDialog: React.FC<{
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: I18nText;
+  body: I18nText;
+}> = ({ open, onClose, onConfirm, title, body }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Dialog onClose={onClose} open={open}>
+      <h3 className="cru-color-danger">{convertI18nText(title, t)}</h3>
+      <hr />
+      <p>{convertI18nText(body, t)}</p>
+      <hr />
+      <div className="cru-dialog-bottom-area">
+        <Button
+          text="operationDialog.cancel"
+          color="secondary"
+          outline
+          onClick={onClose}
+        />
+        <Button
+          text="operationDialog.confirm"
+          color="danger"
+          onClick={() => {
+            onConfirm();
+            onClose();
+          }}
+        />
+      </div>
+    </Dialog>
+  );
+};
+
+export default ConfirmDialog;