recipe-app/frontend/src/components/recipes/IngredientGroupDisplayListItem.tsx

22 lines
No EOL
837 B
TypeScript

import type {IngredientGroupModel} from "../../models/IngredientGroupModel.ts";
type IngredientGroupDisplayListItemProps = {
groupModel: IngredientGroupModel,
index: number,
}
export default function IngredientGroupDisplayListItem({groupModel, index}: IngredientGroupDisplayListItemProps) {
return (<div key={index}>
{/* the title is optional, only print if present */}
{groupModel.title && groupModel.title.trim() !== "" && (
<h3 className="highlight-container-bg mb-2">{groupModel.title}</h3>
)}
<ul>
{groupModel.ingredientList.map((ing, j) => (
<li key={j} className="border-b border-gray-300 last:border-b-0 p-2">
{ing.amount ?? ""} {ing.unit ?? ""} {ing.name}
</li>
))}
</ul>
</div>);
}