...

1 files changed, 39 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..88c90bbc
--- /dev/null
+++ b/FrontEnd/src/views/common/dailog/FullPageDialog.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import classnames from "classnames";
+
+export interface FullPageDialogProps {
+  show: boolean;
+  onBack: () => void;
+  contentContainerClassName?: string;
+}
+
+const FullPageDialog: React.FC<FullPageDialogProps> = ({
+  show,
+  onBack,
+  children,
+  contentContainerClassName,
+}) => {
+  return (
+    <div
+      className="cru-full-page"
+      style={{ display: show ? undefined : "none" }}
+    >
+      <div className="cru-full-page-top-bar">
+        <i
+          className="icon-button bi-arrow-left text-white ms-3"
+          onClick={onBack}
+        />
+      </div>
+      <div
+        className={classnames(
+          "cru-full-page-content-container",
+          contentContainerClassName
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default FullPageDialog;