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

frontend/src/components/DemoModal.tsx

@@ -0,0 +1,28 @@
+import { Link } from 'react-router-dom';
+
+interface DemoModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  closeModal: () => void;
+}
+
+const DemoModal = ({ isOpen, onClose, closeModal }: DemoModalProps) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="modal-overlay fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center" onClick={onClose}>
+      <div className="modal-content bg-amber-200 p-12 rounded-md shadow-md" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-msg">
+          <p>Thanks for checking out my app! Database write operations are disabled in demo mode.</p>
+          <p><a className="text-blue-600" href="mailto:access@fredzernia.com">access@fredzernia.com</a> to request access to the production build</p>
+          <p>Find out more about this app <Link to={'/about'} className="text-blue-600">here</Link></p>
+        </div>
+        <div className="modal-buttons">
+          <button className="bg-amber-600 rounded-md m-4 pt-1 pb-1 pr-2 pl-2" onClick={closeModal}>OK</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DemoModal;