Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | 5x 5x 5x 1x 2x 3x 4x 9x | import { type RecipeDetail, type ScaleResponse } from '../../api/client'
interface RecipeIngredientsProps {
recipe: RecipeDetail
scaledData: ScaleResponse | null
}
export default function RecipeIngredients({
recipe,
scaledData,
}: RecipeIngredientsProps) {
// Use scaled ingredients if available, otherwise use recipe ingredients
const ingredients = scaledData?.ingredients || recipe.ingredients
// Use ingredient_groups if available and not scaled, otherwise flat ingredients list
const hasGroups = recipe.ingredient_groups.length > 0 && !scaledData
if (hasGroups) {
return (
<div className="space-y-6">
{recipe.ingredient_groups.map((group, groupIndex) => (
<div key={groupIndex}>
{group.purpose && (
<h3 className="mb-3 font-medium text-foreground">
{group.purpose}
</h3>
)}
<ol className="space-y-2">
{group.ingredients.map((ingredient, index) => (
<li
key={index}
className="flex items-start gap-3 text-foreground"
>
<span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-primary text-sm font-medium text-primary-foreground">
{index + 1}
</span>
<span>{ingredient}</span>
</li>
))}
</ol>
</div>
))}
</div>
)
}
return (
<ol className="space-y-2">
{ingredients.map((ingredient, index) => (
<li key={index} className="flex items-start gap-3 text-foreground">
<span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-primary text-sm font-medium text-primary-foreground">
{index + 1}
</span>
<span>{ingredient}</span>
</li>
))}
</ol>
)
}
|