34 lines
905 B
TypeScript
34 lines
905 B
TypeScript
|
import type { Ingredient, Ingredients } from "../lib/recipes.ts";
|
||
|
|
|
||
|
|
type IngredientsProps = {
|
||
|
|
ingredients: Ingredients;
|
||
|
|
};
|
||
|
|
|
||
|
|
function formatIngredient(ingredient: Ingredient) {
|
||
|
|
return `${
|
||
|
|
ingredient.amount && ingredient.unit &&
|
||
|
|
` - ${ingredient.amount} ${ingredient.unit}`
|
||
|
|
} ${ingredient.type}`;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const IngredientsList = ({ ingredients }: IngredientsProps) => {
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
{ingredients.map((item, index) => (
|
||
|
|
<div key={index} class="mb-4">
|
||
|
|
{"type" in item && formatIngredient(item)}
|
||
|
|
{"ingredients" in item && Array.isArray(item.ingredients) && (
|
||
|
|
<ul class="pl-4 list-disc">
|
||
|
|
{item.ingredients.map((ingredient, idx) => (
|
||
|
|
<li key={idx}>
|
||
|
|
{formatIngredient(ingredient)}
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|