From 486c1a903c8451d675f4360917c7913e2bb8f42b Mon Sep 17 00:00:00 2001
From: ismailali1553 <ismailali1553@gmail.com>
Date: Fri, 17 Jan 2025 22:16:12 +0100
Subject: [PATCH] Popup statt Modal ,um die Koordinaten zu kopieren

---
 components/CoordinatePopup.js | 42 ++++++++++++++++++++++-------------
 1 file changed, 26 insertions(+), 16 deletions(-)

diff --git a/components/CoordinatePopup.js b/components/CoordinatePopup.js
index 285a349e4..03c12e7b2 100644
--- a/components/CoordinatePopup.js
+++ b/components/CoordinatePopup.js
@@ -6,27 +6,37 @@ const CoordinatePopup = ({ isOpen, coordinates, onClose }) => {
 
   return (
     <div
-      className="absolute z-50 bg-white p-4 rounded-lg shadow-lg"
+      className="fixed inset-0 bg-black bg-opacity-30 flex justify-center z-50"
+      onClick={onClose} // Schließt das Popup, wenn der Hintergrund angeklickt wird
       style={{
-        top: "10%", // Zentriert oben, ca. 10% von oben
-        left: "50%",
-        transform: "translateX(-50%)", // Horizontale Zentrierung
+        alignItems: "flex-start", // Positioniert das Popup oben
+        paddingTop: "5px", // Abstand von oben
       }}
     >
-      <h2 className="text-lg font-bold mb-2">Koordinaten</h2>
-      <p className="mb-4">{coordinates}</p>
-      <button
-        onClick={() => {
-          navigator.clipboard.writeText(coordinates);
-          alert("Koordinaten kopiert!");
+      <div
+        className="bg-white p-4 rounded-lg shadow-xl"
+        style={{
+          width: "300px",
         }}
-        className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
+        onClick={(e) => e.stopPropagation()} // Verhindert das Schließen, wenn innerhalb des Popups geklickt wird
       >
-        Kopieren
-      </button>
-      <button onClick={onClose} className="mt-2 bg-gray-300 text-black px-4 py-2 rounded hover:bg-gray-400">
-        Schließen
-      </button>
+        <h2 className="text-xl font-bold text-center mb-4 text-gray-800">Koordinaten</h2>
+        <p className="text-center text-lg text-gray-600 font-mono mb-6">{coordinates}</p>
+        <div className="flex justify-center gap-4">
+          <button
+            onClick={() => {
+              navigator.clipboard.writeText(coordinates);
+              alert("Koordinaten kopiert!");
+            }}
+            className="bg-blue-500 text-white px-6 py-2 rounded-lg shadow hover:bg-blue-600 transition-all"
+          >
+            Kopieren
+          </button>
+          <button onClick={onClose} className="bg-gray-300 text-gray-800 px-6 py-2 rounded-lg shadow hover:bg-gray-400 transition-all">
+            Schließen
+          </button>
+        </div>
+      </div>
     </div>
   );
 };