created universal popup window

public/index.html

@@ -15,5 +15,6 @@
                 <img src="%PUBLIC_URL%/leaf.svg" alt="eco-meet logo" style="width: 15%; height: 15%" />
             </div>
         </div>
+        <div id="popup-container" style="display: none; width: 100vw; height: 100vh; z-index: 20; position: absolute; top: 0; left: 0"></div>
     </body>
 </html>

src/components/Window/index.js

@@ -0,0 +1,9 @@
+import styles from "./index.module.scss";
+
+export const Window = (props) => {
+    return (
+        <div className={styles.container}>
+            <div className={styles.window}>{props.children}</div>
+        </div>
+    );
+};

src/components/Window/index.module.scss

@@ -0,0 +1,32 @@
+@import "../../index.scss";
+
+.container {
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.75);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.window {
+    max-width: 80%;
+    max-height: 80%;
+    min-width: 100px;
+    min-height: 100px;
+    border-radius: 10px;
+    background-color: $bggray;
+    padding: 10px;
+    animation: animate-in 0.3s ease backwards;
+}
+
+@keyframes animate-in {
+    from {
+        transform: scale(0.4);
+        opacity: 0;
+    }
+    to {
+        transform: scale(1);
+        opacity: 1;
+    }
+}

src/utils/spawnPopup.js

@@ -0,0 +1,30 @@
+import ReactDOM from "react-dom";
+import { Window } from "../components/Window";
+import { window as windowStyles } from "../components/Window/index.module.scss";
+
+const closeWindow = (resolver) => {
+    return () => {
+        document.getElementsByClassName(windowStyles)[0].animate(
+            [
+                { transform: "scale(1)", opacity: 1 },
+                { transform: "scale(0)", opacity: 0 },
+            ],
+            {
+                easing: "ease",
+                duration: 300,
+            }
+        );
+        setTimeout(() => {
+            ReactDOM.unmountComponentAtNode(document.getElementById("popup-container"));
+            document.getElementById("popup-container").style.display = "none";
+            resolver();
+        }, 300);
+    };
+};
+
+export const spawnPopup = async (elements) => {
+    return new Promise((resolve) => {
+        document.getElementById("popup-container").style.display = "block";
+        ReactDOM.render(<Window>{elements(closeWindow(resolve))}</Window>, document.getElementById("popup-container"));
+    });
+};