initial commit

frontend/src/components/RecipeEditor.tsx

@@ -0,0 +1,61 @@
+import { useState } from "react"
+import type { Recipe } from "../types/recipe"
+import type { Ingredient } from "../types/ingredient"
+import {IngredientListEditor} from "./IngredientListEditor"
+
+type RecipeEditorProps = {
+  recipe: Recipe
+  onSave: (recipe: Recipe) => void
+}
+
+/**
+ * Editor component for managing a recipe, including title,
+ * ingredients (with amount, unit, name), instructions, and image URL.
+ */
+export default function RecipeEditor({ recipe, onSave }: RecipeEditorProps) {
+  const [draft, setDraft] = useState<Recipe>(recipe)
+
+  const updateIngredients = (ingredients: Ingredient[]) => {
+    setDraft({ ...draft, ingredients })
+  }
+   if (!recipe) return <div>Oops, there's no recipe in RecipeEditor...</div>
+  return (
+    <div>
+      <h2 className="text-xl font-bold mb-2">
+        {recipe.id ? "Edit Recipe" : "New Recipe"}
+      </h2>
+
+      {/* Title */}
+      <h3>Title</h3>
+      <input
+        className="border p-2 w-full mb-2"
+        placeholder="Title"
+        value={draft.title}
+        onChange={e => setDraft({ ...draft, title: e.target.value })}
+      />
+
+      {/* Ingredient List */}
+      <IngredientListEditor
+        ingredients={draft.ingredients}
+        onChange={updateIngredients}
+      />
+
+      <h3>Instructions</h3>
+      {/* Instructions */}
+      <textarea
+        className="border p-2 w-full mb-2"
+        placeholder="Instructions"
+        value={draft.instructions}
+        onChange={e => setDraft({ ...draft, instructions: e.target.value })}
+      />
+
+      {/* Save Button */}
+      <button
+        className="p-2 bg-green-500 text-white rounded"
+        onClick={() => onSave(draft)}
+      >
+        💾 Save
+      </button>
+    </div>
+    )
+}