prep/cook times and some fit and finish

frontend/src/pages/AddRecipe.tsx

@@ -21,6 +21,8 @@ function AddRecipe() {
   const [recipeCuisine, setRecipeCuisine] = useState("");
   const [author, setAuthor] = useState("");
   const [stars, setStars] = useState(0);
+  const [prepMinutes, setPrepMinutes] = useState(5);
+  const [cookMinutes, setCookMinutes] = useState(5);
 
   const addRecipeForm = async (event: React.FormEvent) => {
     event.preventDefault();
@@ -32,6 +34,8 @@ function AddRecipe() {
         name: recipeName,
         cuisine: recipeCuisine,
         author: author,
+        prep_minutes: prepMinutes,
+        cook_minutes: cookMinutes,
         stars: stars,
         ingredients: ingredients,
         steps: stepsHash
@@ -74,44 +78,67 @@ function AddRecipe() {
           value={author}
           onChange={(e) => setAuthor(e.target.value)}
         />
+        <div className="flex items-center justify-between mb-4">
+          <div>
+            <label htmlFor="prepTime" className="mr-2 font-bold">Prep Time:</label>
+            <input
+              type="number"
+              placeholder="prep time in minutes"
+              className="recipe-cusine p-2 border border-gray-300 rounded w-24"
+              value={prepMinutes}
+              onChange={(e) => setPrepMinutes(e.target.value)}
+            />
+            <span className="ml-2">minutes</span>
+          </div>
+          <div>
+            <label htmlFor="cookTime" className="mr-2 font-bold">Cook Time:</label>
+            <input
+              type="text"
+              placeholder="cook time in minutes"
+              className="recipe-cusine p-2 border border-gray-300 rounded w-24"
+              value={cookMinutes}
+              onChange={(e) => setCookMinutes(e.target.value)}
+            />
+            <span className="ml-2">minutes</span>
+          </div>
+          <div>
+            <StarRating rating={stars} onRatingChange={(newRating: number) => setStars(newRating)} />
+          </div>
+        </div>
+        <label className="mb-4 flex items-center cursor-pointer">
+          <div className="relative">
+            <input
+              type="checkbox"
+              checked={showBulkForm}
+              onChange={(e) => setShowBulkForm(e.target.checked)}
+              className="sr-only"
+            />
+          </div>
+        </label>
         <div>
-          <StarRating rating={stars} onRatingChange={(newRating: number) => setStars(newRating)} />
+          <AddBulkIngredients ingredients={ingredients} onChange={setIngredients} />
         </div>
-        <button type="submit" className="ar-button bg-amber-600 text-white py-2 px-4 rounded hover:bg-amber-700">
-          submit
-        </button>
-      </form>
-      <label className="mb-4 flex items-center cursor-pointer">
-        <div className="relative">
-          <input
-            type="checkbox"
-            checked={showBulkForm}
-            onChange={(e) => setShowBulkForm(e.target.checked)}
-            className="sr-only"
-          />
-        </div>
-        <span className="ml-3 text-amber-800 font-medium">Bulk Entry</span>
-      </label>
-      <div>
-        <AddBulkIngredients ingredients={ingredients} onChange={setIngredients} />
-      </div>
-      {/*<ul className="mb-4">
+        {/*<ul className="mb-4">
         {ingredients.map((ing, index) => (
           <li key={index} className="text-gray-700 flex items-start mb-2">
             <span>{ing}</span>
           </li>
         ))}
       </ul>*/}
-      <div>
-        <AddBulkSteps steps={steps} onChange={setSteps} />
-      </div>
-      {/*<ul className="mb-4">
+        <div>
+          <AddBulkSteps steps={steps} onChange={setSteps} />
+        </div>
+        {/*<ul className="mb-4">
         {steps.map((step) => (
           <li key={step.step_number} className="text-gray-700 flex items-start mb-2">
             <span>{`${step.step_number}. ${step.instruction}`}</span>
           </li>
         ))}
       </ul>*/}
+        <button type="submit" className="ar-button bg-amber-600 text-white py-2 px-4 rounded hover:bg-amber-700">
+          submit
+        </button>
+      </form>
     </div>
   )
 }