Modal (Popup) Component

A Component that contains a button to open a modal. Containing A message and a button to abort and send

anwendung/src/components/Button.jsx

@@ -17,6 +17,7 @@ export default function Button(p) {
     let iconHTML = p.icon;
     let iconWidth = p.iconWidth, iconHeight = p.iconHeight;
     let onClick = p.onClick;
+    let color = p.color;
 
     //if parameters are not set, they are set to default values
     if (height == null) height = 50;
@@ -24,6 +25,7 @@ export default function Button(p) {
     if (iconWidth == null) iconWidth = width-10;
     if (iconHeight == null) iconHeight = height-10;
     if (onClick == null) onClick = () => {};
+    if (color == null) color = "#363636";
 
     //build in the icon width and height to the svg tag (svg tag should not contain any size information by default)
     if (iconHTML != null) {
@@ -38,13 +40,12 @@ export default function Button(p) {
     //return the button
     return (
         <>
-            <button className={"round-border button font font-middle"}
+            <button className={"round-border button font font-small"}
                     style={{
-                        width: width,
-                        height: height,
                         display: "flex",
                         alignItems: "center",
-                        justifyContent: "center"
+                        justifyContent: "center",
+                        backgroundColor: color
                     }}
                     onClick={onClick}>
                 {text}

anwendung/src/components/PopUp.jsx

@@ -0,0 +1,39 @@
+import Button from "@/components/Button";
+import {useState} from "react";
+
+export default function PopUp() {
+    let shown = false;
+    const [hidden, setHidden] = useState("none");
+
+    function toggleModal() {
+        shown = !shown;
+        setHidden(shown ? "block" : "none")
+    }
+
+    function on_abgeben_pressed()
+    {
+
+    }
+
+    return (
+        <>
+            <Button text={"Abgeben"} onClick={toggleModal}/>
+
+            <div style={{
+                display: hidden
+            }}>
+
+                <div className={"modal-container"}>
+                    <div className={"modal"}>
+                        <p className={"font-middle"}>Kalender wirklich abgeben?</p>
+                        <div>
+                            <Button text={"Abbrechen"} color={"#363636"}  onClick={toggleModal}/>
+                            <Button text={"Abgeben"} color={"#7a7a7a"}  onClick={on_abgeben_pressed}/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </>
+    )
+}