Renaming to distinguish editor and display list items and adding component for IngredientGroupDisplayListItem.tsx

frontend/src/components/recipes/IngredientGroupDisplayListItem.tsx

@@ -0,0 +1,22 @@
+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>);
+}