modal

frontend/src/components/CookbookRecipeTile.tsx

@@ -1,4 +1,6 @@
+import React, { useState } from 'react';
 import { type Recipe } from "../types/Recipe"
+import Modal from '../components/Modal.tsx'
 
 interface CookbookRecipeTileProps {
   recipe: Recipe;
@@ -6,19 +8,31 @@ interface CookbookRecipeTileProps {
 }
 
 function CookbookRecipeTile({ recipe, handleDelete }: CookbookRecipeTileProps) {
-  const deleteHandler = () => {
-    if (handleDelete) {
-      handleDelete(recipe.id);
-    }
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const openModal = () => setIsModalOpen(true);
+  const closeModal = () => setIsModalOpen(false);
+  const confirmDelete = () => {
+    handleDelete(recipe.id);
+    closeModal();
   };
 
+
   return (
     <div className="recipe-card">
       <div className="recipe-info">
         <h3><a href={`/recipe/${recipe.id}`}>{recipe.name}</a></h3>
-        <button onClick={deleteHandler}>Delete Recipe</button>
+        <button onClick={openModal}>Delete Recipe</button>
       </div>
-    </div >
+
+      <Modal
+        isOpen={isModalOpen}
+        onClose={closeModal}
+        message="Are you sure you want to delete this recipe?"
+        confirmAction={confirmDelete}
+        cancelAction={closeModal}
+      />
+    </div>
   );
 }
 

frontend/src/components/Modal.tsx

@@ -0,0 +1,29 @@
+import "../css/Modal.css"
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  message: string;
+  confirmAction: () => void;
+  cancelAction: () => void;
+}
+
+const Modal = ({ isOpen, onClose, message, confirmAction, cancelAction }: ModalProps) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-msg">
+          <span aria-labelledby="message">{message}</span>
+        </div>
+        <div className="modal-buttons">
+          <button onClick={confirmAction}>Yes, Delete</button>
+          <button onClick={cancelAction}>Cancel</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Modal;

frontend/src/css/Modal.css

@@ -0,0 +1,23 @@
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal-content {
+  background: darkblue;
+  padding: 50px;
+  border-radius: 5px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.modal-content button {
+  background: gray;
+  margin: 1em;
+}