Close button

components/ProjectModal.tsx

@@ -2,6 +2,7 @@ import type { NextPage } from "next";
 import { useEffect, useRef, useState } from "react";
 import asciidoctor from "asciidoctor";
 import styles from "../styles/ProjectModal.module.css";
+import Link from "next/link";
 
 interface ModalInput {
     project: string;
@@ -37,7 +38,7 @@ Last updated: ${lastUpdate} | <a href="https://git.c0ntroller.de/c0ntroller/fron
                 if (res.status !== 200) setProjectData(projectServerErrorHtml);
                 res.text().then(data => {
                     try {
-                        const adDoc = ad.load(data, {attributes: {showtitle: true}});
+                        const adDoc = ad.load(data, { attributes: { showtitle: true } });
                         setProjectData(adDoc.convert(adDoc).toString() + generateFooter(project, adDoc.getAttribute("docdatetime")));
                     } catch {
                         setProjectData(projectServerErrorHtml);
@@ -54,17 +55,12 @@ Last updated: ${lastUpdate} | <a href="https://git.c0ntroller.de/c0ntroller/fron
 
     }, [projectData, visible]);
 
-    const onEscClose = (e: React.KeyboardEvent) => {
-        console.log(e);
-        if (e.key === "Escape") {
-            //e.preventDefault();
-            setVisible(false);
-        }
-    };
-    
     if (!visible) return <></>;
 
     return <div className={styles.modal}>
+        <a href="javascript:void(0);" onClick={() => setVisible(false)}>
+            <div className={styles.modalClose}><div className={styles.modalCloseAlign}>X</div></div>
+        </a>
         <div ref={containerRef} className={`${styles.modalContainer} asciidoc`}>
         </div>
     </div>;

styles/ProjectModal.module.css

@@ -17,4 +17,30 @@
     padding: 20px;
     border-radius: 20px;
     overflow-y: auto;
+    position: relative;
+}
+
+.modalClose {
+    float: right;
+    position: relative;
+    background: #555;
+    border-radius: 50%;
+    width: 2em;
+    height: 2em;
+    font-family: sans-serif;
+    margin-bottom: -20px;
+    z-index: 100;
+    /*text-align: center;*/
+    /*padding: auto 0;*/
+}
+
+.modalCloseAlign {
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: block;
+    color: #fff;
+    text-decoration: none;
 }