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 = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
-    if (handleDelete) {
+
+  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>
+
+      <Modal
+        isOpen={isModalOpen}
+        onClose={closeModal}
+        message="Are you sure you want to delete this recipe?"
+        confirmAction={confirmDelete}
+        cancelAction={closeModal}
+      />
     </div>
-    </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;
+}

todo

@@ -3,4 +3,5 @@ add recipe redirect to recipe page. id is getting returned now.
 make naming consistent and sensical of pages, functions, vars etc. 
 add are you sure modal to delete.
 add delete to recipe page
-git repo
+Ensure Accessibility: Make sure you include attributes like aria-labelledby and aria-describedby for better accessibility. # i dont know what this means, but it might be a good idea to look into it or other accessability before finishing the project
+