set up demo mode

frontend/src/pages/AddRecipe.tsx

@@ -4,6 +4,7 @@ import { useNavigate } from "react-router-dom";
 import AddBulkIngredients from "../components/AddBulkIngredients.tsx"
 import AddBulkSteps from "../components/AddBulkSteps.tsx"
 import StarRating from "../components/StarRating.tsx"
+import DemoModal from '../components/DemoModal.tsx'
 // import { type Step } from "../types/Recipe";
 
 interface Step {
@@ -23,9 +24,14 @@ function AddRecipe() {
   const [stars, setStars] = useState(0);
   const [prepMinutes, setPrepMinutes] = useState(5);
   const [cookMinutes, setCookMinutes] = useState(5);
+  const [showDemoModal, setShowDemoModal] = useState(false);
 
   const addRecipeForm = async (event: React.FormEvent) => {
     event.preventDefault();
+    if (process.env.NODE_ENV === 'demo') {
+      setShowDemoModal(true);
+      return;
+    }
     const stepsHash = Object.fromEntries(
       steps.map(step => [step.step_number, step.instruction])
     );
@@ -139,6 +145,13 @@ function AddRecipe() {
           submit
         </button>
       </form>
+      {showDemoModal && (
+        <DemoModal
+          isOpen={showDemoModal}
+          onClose={() => setShowDemoModal(false)}
+          closeModal={() => setShowDemoModal(false)}
+        />
+      )}
     </div>
   )
 }