Delete Button For Semester Tile

anwendung/src/components/Icons.js

@@ -5,3 +5,7 @@ export const arrowLeft = `<svg xmlns="http://www.w3.org/2000/svg" fill="white" c
 export const arrowRight = `<svg xmlns="http://www.w3.org/2000/svg" fill="white" class="bi bi-arrow-right" viewBox="0 0 16 16">
   <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
 </svg>`
+
+export const deleteItem = `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16">
+  <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/>
+</svg>`

anwendung/src/components/SemesterTile.jsx

@@ -1,5 +1,7 @@
 import StatusBar from "@/components/StatusBar";
 import React, {useEffect} from "react";
+import Button from "@/components/Button";
+import {deleteItem} from "@/components/Icons";
 
 export default function SemesterTile(p)
 {
@@ -9,9 +11,10 @@ export default function SemesterTile(p)
     })
 
     return (
-        <div onMouseDown={(e) => p.onClick(e)} className={"semester-tile"}>
+        <div onClick={(e) => p.onClick(e)} className={"semester-tile"}>
             <p>{p.text}</p>
             <StatusBar progress={0}/>
+            <Button icon={deleteItem} width={30} height={30} onClick={p.onButtonDeleteClick}/>
         </div>
     )
 }

anwendung/src/pages/semesteroverview.js

@@ -16,17 +16,11 @@ export default function SemesterOverview(p)
         })
     }
 
-    function onClickSemester(e, f)
+    function onClickSemester(e, m)
     {
-        localStorage.setItem("currentsid", e.id)
-        if(f.button === 0)
+        if(m.target === m.currentTarget)
         {
-            // router.push("/createSemester")
-        }
-        else
-        {
-            setModalHint(e.name + " Löschen?");
-            togglePopup();
+            localStorage.setItem("currentsid", e.id)
         }
     }
 
@@ -76,7 +70,11 @@ export default function SemesterOverview(p)
     return (
         <div className={"semester-overview"}>
             {
-                entries.map(e => (<SemesterTile text={e.name} onClick={(f) => onClickSemester(e, f)}/>))
+                entries.map(e => (<SemesterTile text={e.name} onClick={(f) => onClickSemester(e, f)} onButtonDeleteClick={() => {
+                        localStorage.setItem("currentsid", e.id)
+                        setModalHint(e.name + " Löschen?");
+                        togglePopup();
+                }}/>))
             }
             <Button color={"#818181"} text={"+"} width={240} height={160} fontColor={"black"} fontSize={50}
             onClick={() => onClickNewSemester()}/>