add ingredients working

frontend/src/pages/AddRecipe.tsx

@@ -2,11 +2,13 @@ import React, { useState } from 'react';
 import { addRecipe } from "../services/frontendApi.js";
 import { useNavigate } from "react-router-dom";
 import AddBulkIngredients from "../components/AddBulkIngredients.tsx"
+import AddIngredientsForm from "../components/AddIngredientsForm.tsx"
 
 function AddRecipe() {
   const [newRecipeId, setNewRecipeId] = useState<number | null>(null);
   const navigate = useNavigate();
   const [ingredients, setIngredients] = useState<{ quantity: number; unit: string; name: string }[]>([]);
+  const [showBulkForm, setShowBulkForm] = useState(true);
 
   const addRecipeForm = async (event: React.FormEvent) => {
     event.preventDefault();
@@ -50,9 +52,28 @@ function AddRecipe() {
           submit
         </button>
       </form>
+      <label>
+        <input
+          type="checkbox"
+          checked={showBulkForm}
+          onChange={(e) => setShowBulkForm(e.target.checked)}
+        />
+        Bulk Entry
+      </label>
       <div>
-        <AddBulkIngredients onChange={setIngredients} />
+        {showBulkForm ?
+          <AddBulkIngredients ingredients={ingredients} onChange={setIngredients} /> :
+          <AddIngredientsForm ingredients={ingredients} onSubmit={setIngredients} />
+        }
       </div>
+      <div>
+        <ul>
+          {ingredients.map((ing, index) => (
+            <li key={index}>{`${ing.quantity} ${ing.unit} ${ing.name}`}</li>
+          ))}
+        </ul>
+      </div>
+
     </div>
   )
 }