1 files changed, 44 insertions, 0 deletions
diff --git a/FrontEnd/src/views/common/dailog/FullPageDialog.tsx b/FrontEnd/src/views/common/dailog/FullPageDialog.tsx
new file mode 100644
index 00000000..2e77dbb0
--- /dev/null
+++ b/FrontEnd/src/views/common/dailog/FullPageDialog.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import { createPortal } from "react-dom";
+import classnames from "classnames";
+
+import "./FullPageDialog.css";
+
+export interface FullPageDialogProps {
+  show: boolean;
+  onBack: () => void;
+  contentContainerClassName?: string;
+}
+
+const FullPageDialog: React.FC<FullPageDialogProps> = ({
+  show,
+  onBack,
+  children,
+  contentContainerClassName,
+}) => {
+  return createPortal(
+    <div
+      className="cru-full-page"
+      style={{ display: show ? undefined : "none" }}
+    >
+      <div className="cru-full-page-top-bar">
+        <i
+          className="icon-button bi-arrow-left ms-3 cru-full-page-back-button"
+          onClick={onBack}
+        />
+      </div>
+      <div
+        className={classnames(
+          "cru-full-page-content-container",
+          contentContainerClassName
+        )}
+      >
+        {children}
+      </div>
+    </div>,
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    document.getElementById("portal")!
+  );
+};
+
+export default FullPageDialog;