move navigation behavior for editor to methods

frontend/src/components/RecipeEditor.tsx

@@ -1,5 +1,4 @@
 import { useState } from "react"
-import { Link } from "react-router-dom" // @todo replace cancel link with button and onCancel handler
 import type { Recipe } from "../types/recipe"
 import type { Ingredient } from "../types/ingredient"
 import {IngredientListEditor} from "./IngredientListEditor"
@@ -7,13 +6,14 @@ import {IngredientListEditor} from "./IngredientListEditor"
 type RecipeEditorProps = {
   recipe: Recipe
   onSave: (recipe: Recipe) => void
+  onCancel: () => 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) {
+export default function RecipeEditor({ recipe, onSave, onCancel }: RecipeEditorProps) {
   const [draft, setDraft] = useState<Recipe>(recipe)
 
   const updateIngredients = (ingredients: Ingredient[]) => {
@@ -58,12 +58,12 @@ export default function RecipeEditor({ recipe, onSave }: RecipeEditorProps) {
         >
           Save
         </button>
-        <Link
-          to={`/recipe/${recipe.id}`}
+        <button
           className="default-button"
+          onClick={() => onCancel()}
         >
           Cancel
-        </Link>
+        </button>
       </div>
     </div>
     )