araemer/recipe-app
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity Actions

Extract NumberStepControl

Browse source
This commit is contained in:
araemer 2025-10-21 07:54:13 +02:00
parent f980d4d86d
commit 13fe0ee852
4 changed files with 134 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

39
frontend/src/components/recipes/RecipeDetailPage.tsx
View file

@ -5,6 +5,7 @@ import {fetchRecipe} from "../../api/points/RecipePoint"
import {getRecipeEditUrl, getRecipeListUrl} from "../../routes"
import ButtonLink from "../basics/ButtonLink"
import {mapRecipeDtoToModel} from "../../mappers/RecipeMapper"
import {NumberStepControl} from "../basics/NumberStepControl.tsx";
/**
@ -99,36 +100,12 @@ export default function RecipeDetailPage() {
Für {recipeWorkingCopy.servings.amount} {recipeWorkingCopy.servings.unit}
</p>
<div className="flex items-center justify-end sm:justify-center gap-2">
{/* Minus button */}
<button
type="button"
onClick={() => recalculateIngredients(Math.max(1, recipeWorkingCopy.servings.amount - 1))}
className="enumeration-indicator primary-button-bg"
>
–
</button>
{/* Number input (no spin buttons) */}
<input
type="number"
inputMode="numeric"
pattern="[0-9]*"
className="w-16 text-center input-field"
value={recipeWorkingCopy.servings.amount}
onChange={e => recalculateIngredients(Number(e.target.value))}
min={1}
/>
{/* Plus button */}
<button
type="button"
onClick={() => recalculateIngredients(recipeWorkingCopy.servings.amount + 1)}
className="enumeration-indicator primary-button-bg"
>
+
</button>
</div>
<NumberStepControl
value={recipeWorkingCopy.servings.amount}
onChange={recalculateIngredients}
min={1}
className="justify-end sm:justify-center"
/>
</div>
{/* Ingredients */}
@ -156,7 +133,7 @@ export default function RecipeDetailPage() {
{recipe.instructionStepList.map((step, j) => (
<li key={j} className="flex items-start gap-4">
{/* Step number circle */}
<div className="enumeration-indicator">
<div className="circular-container">
{j + 1}
</div>