set up demo mode

frontend/src/components/CookbookRecipeTile.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { type RecipeSmall } from "../types/Recipe"
 import Modal from '../components/Modal.tsx'
+import DemoModal from '../components/DemoModal.tsx'
 import { Link } from 'react-router-dom';
 
 interface CookbookRecipeTileProps {
@@ -9,13 +10,19 @@ interface CookbookRecipeTileProps {
 }
 
 function CookbookRecipeTile({ recipe, handleDelete }: CookbookRecipeTileProps) {
-  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [showConfirmModal, setShowConfirmModal] = useState(false);
+  const [showDemoModal, setShowDemoModal] = useState(false);
 
-  const openModal = () => { setIsModalOpen(true) };
-  const closeModal = () => { setIsModalOpen(false) };
+  const openModal = () => { setShowConfirmModal(true) };
+  const closeModal = () => { setShowConfirmModal(false) };
   const confirmDelete = () => {
-    handleDelete(recipe.id);
-    closeModal();
+    if (process.env.NODE_ENV === 'demo') {
+      closeModal();
+      setShowDemoModal(true);
+    } else {
+      handleDelete(recipe.id);
+      closeModal();
+    }
   };
 
 
@@ -30,12 +37,19 @@ function CookbookRecipeTile({ recipe, handleDelete }: CookbookRecipeTileProps) {
         </button>
       </div>
       <Modal
-        isOpen={isModalOpen}
+        isOpen={showConfirmModal}
         onClose={closeModal}
         message="Are you sure you want to delete this recipe?"
         confirmAction={confirmDelete}
         cancelAction={closeModal}
       />
+      {showDemoModal && (
+        <DemoModal
+          isOpen={showDemoModal}
+          onClose={() => setShowDemoModal(false)}
+          closeModal={() => setShowDemoModal(false)}
+        />
+      )}
     </div>
   );
 };