85 lines
2.2 KiB
TypeScript
85 lines
2.2 KiB
TypeScript
import { Signal } from "@preact/signals";
|
|
import type { Ingredient, IngredientGroup } from "@lib/recipeSchema.ts";
|
|
import { FunctionalComponent } from "preact";
|
|
|
|
function numberToString(num: number) {
|
|
return (Math.floor(num * 4) / 4).toString();
|
|
}
|
|
|
|
function stringToNumber(str: string) {
|
|
return parseFloat(str);
|
|
}
|
|
|
|
const Ingredient = (
|
|
{ ingredient, amount, key = "", portion = 1 }: {
|
|
ingredient: Ingredient;
|
|
amount: Signal<number>;
|
|
key?: string | number;
|
|
portion?: number;
|
|
},
|
|
) => {
|
|
const { name, quantity, unit } = ingredient;
|
|
|
|
const parsedQuantity = stringToNumber(quantity);
|
|
|
|
const finalAmount = (typeof parsedQuantity === "number" && amount)
|
|
? (parsedQuantity / portion) * (amount?.value || 1)
|
|
: "";
|
|
|
|
return (
|
|
<tr key={key}>
|
|
<td class="pr-4 py-2">
|
|
{numberToString(finalAmount || 0) +
|
|
(typeof unit === "string" ? unit : "")}
|
|
</td>
|
|
<td class="px-4 py-2">{name}</td>
|
|
</tr>
|
|
);
|
|
};
|
|
|
|
export const IngredientsList: FunctionalComponent<
|
|
{
|
|
ingredients: (Ingredient | IngredientGroup)[];
|
|
amount: Signal<number>;
|
|
portion?: number;
|
|
}
|
|
> = (
|
|
{ ingredients, amount, portion },
|
|
) => {
|
|
return (
|
|
<table class="w-full border-collapse table-auto">
|
|
<tbody>
|
|
{ingredients.map((item, index) => {
|
|
if ("items" in item) {
|
|
// Render IngredientGroup
|
|
const { name, items: groupIngredients } = item as IngredientGroup;
|
|
|
|
return (
|
|
<>
|
|
<tr key={index}>
|
|
<td colSpan={3} class="pr-4 py-2 font-italic">{name}</td>
|
|
</tr>
|
|
{groupIngredients.map((item, index) => {
|
|
// Render Ingredient
|
|
return (
|
|
<Ingredient
|
|
key={index}
|
|
ingredient={item}
|
|
amount={amount}
|
|
portion={portion}
|
|
/>
|
|
);
|
|
})}
|
|
</>
|
|
);
|
|
} else {
|
|
return (
|
|
<Ingredient ingredient={item} amount={amount} portion={portion} />
|
|
);
|
|
}
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
);
|
|
};
|