Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Popup statt Modal ,um die Koordinaten zu kopieren

Browse Source
This commit is contained in:
ismailali1553
2025-01-17 22:16:12 +01:00
parent e9abcacf1e
commit 486c1a903c
1 changed files with 26 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
components/CoordinatePopup.js
View File

@@ -6,28 +6,38 @@ const CoordinatePopup = ({ isOpen, coordinates, onClose }) => {
return ( return (
<div <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={{ style={{
top: "10%", // Zentriert oben, ca. 10% von oben alignItems: "flex-start", // Positioniert das Popup oben
left: "50%", paddingTop: "5px", // Abstand von oben
transform: "translateX(-50%)", // Horizontale Zentrierung
}} }}
> >
<h2 className="text-lg font-bold mb-2">Koordinaten</h2> <div
<p className="mb-4">{coordinates}</p> className="bg-white p-4 rounded-lg shadow-xl"
style={{
width: "300px",
}}
onClick={(e) => e.stopPropagation()} // Verhindert das Schließen, wenn innerhalb des Popups geklickt wird
>
<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 <button
onClick={() => { onClick={() => {
navigator.clipboard.writeText(coordinates); navigator.clipboard.writeText(coordinates);
alert("Koordinaten kopiert!"); alert("Koordinaten kopiert!");
}} }}
className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600" className="bg-blue-500 text-white px-6 py-2 rounded-lg shadow hover:bg-blue-600 transition-all"
> >
Kopieren Kopieren
</button> </button>
<button onClick={onClose} className="mt-2 bg-gray-300 text-black px-4 py-2 rounded hover:bg-gray-400"> <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 Schließen
</button> </button>
</div> </div>
</div>
</div>
); );
}; };