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 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | 9x 9x 9x 9x | import { Minus, Plus } from 'lucide-react'
import { type RecipeDetail, type ScaleResponse } from '../../api/client'
interface ServingsDisplayProps {
recipe: RecipeDetail
canShowServingAdjustment: boolean
servings: number | null
scaledData: ScaleResponse | null
scalingLoading: boolean
onServingChange: (delta: number) => void
}
function AdjustableServings({
recipe,
servings,
scaledData,
scalingLoading,
onServingChange,
}: Omit<ServingsDisplayProps, 'canShowServingAdjustment'>) {
if (!servings) return null
return (
<div className="flex items-center gap-2 text-sm">
<span className="text-muted-foreground">Servings:</span>
<div className="flex items-center gap-1">
<button
onClick={() => onServingChange(-1)}
disabled={servings <= 1 || scalingLoading}
className="rounded-md bg-muted p-1 text-foreground transition-colors hover:bg-muted/80 disabled:opacity-50"
>
<Minus className="h-4 w-4" />
</button>
<span className="w-8 text-center font-medium text-foreground">
{scalingLoading ? '...' : servings}
</span>
<button
onClick={() => onServingChange(1)}
disabled={scalingLoading}
className="rounded-md bg-muted p-1 text-foreground transition-colors hover:bg-muted/80 disabled:opacity-50"
>
<Plus className="h-4 w-4" />
</button>
</div>
{scaledData && servings !== recipe?.servings && (
<span className="text-xs text-muted-foreground">
(scaled from {recipe?.servings})
</span>
)}
</div>
)
}
function StaticServings({ servings }: { servings: number }) {
return (
<div className="flex items-center gap-2 text-sm">
<span className="text-muted-foreground">Servings:</span>
<span className="text-foreground">{servings}</span>
</div>
)
}
export default function ServingsDisplay({
recipe,
canShowServingAdjustment,
servings,
scaledData,
scalingLoading,
onServingChange,
}: ServingsDisplayProps) {
Iif (canShowServingAdjustment && servings) {
return (
<AdjustableServings
recipe={recipe}
servings={servings}
scaledData={scaledData}
scalingLoading={scalingLoading}
onServingChange={onServingChange}
/>
)
}
Eif (!canShowServingAdjustment && recipe.servings) {
return <StaticServings servings={recipe.servings} />
}
return null
}
|