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>
   );
 }