Add HorizontalInputGroupLayout Component

frontend/src/App.css

@@ -29,7 +29,15 @@
         @apply text-gray-600;
     }
 
-    /* background */
+
+    /* errors */
+    .error-text {
+        @apply text-sm text-red-600;
+    }
+
+    /* @todo replace by components!
+
+/* background */
     .app-bg {
         @apply flex items-center w-screen justify-center min-h-screen bg-gray-50;
     }
@@ -42,15 +50,6 @@
         @apply p-6 max-w-2xl mx-auto;
     }
 
-    /* errors */
-    .error-text {
-        @apply text-sm text-red-600;
-    }
-
-    /* @todo replace by components!
-    .horizontal-input-group {
-        @apply flex gap-2 mb-2 items-center;
-    }
 
     /* containers */
     .circular-container {

frontend/src/components/basics/HorizontalInputGroupLayout.tsx

@@ -0,0 +1,29 @@
+import type {ReactNode} from "react";
+import clsx from "clsx";
+
+type HorizontalInputGroupLayoutProps = {
+    /** Content to render inside the header */
+    children: ReactNode;
+
+    /** Optional additional Tailwind classes */
+    className?: string;
+};
+
+/**
+ * A layout for horizontally aligning inputs and buttons - designed for pages with several input items in a row
+ * @param children Children of the layout, i.e., inputs
+ * @param className Optional additional styles
+ * @constructor
+ */
+export default function HorizontalInputGroupLayout({children, className = ""}: HorizontalInputGroupLayoutProps) {
+    return (
+        <div
+            className={clsx(
+                "flex gap-2 mb-2 items-center",
+                className
+            )}
+        >
+            {children}
+        </div>
+    );
+}

frontend/src/components/recipes/IngredientGroupListItem.tsx

@@ -3,6 +3,7 @@ import {ButtonType} from "../basics/BasicButtonDefinitions.ts";
 import {IngredientListEditor} from "./IngredientListEditor.tsx";
 import type {IngredientGroupModel} from "../../models/IngredientGroupModel.ts";
 import type {IngredientModel} from "../../models/IngredientModel.ts";
+import HorizontalInputGroupLayout from "../basics/HorizontalInputGroupLayout.tsx";
 
 type IngredientGroupListItemProps = {
     /** The list item's index */
@@ -33,7 +34,7 @@ export default function IngredientGroupListItem({
     }
     return (
         <div key={index} className="pb-4 border-b border-gray-400 mb-4">
-            <div className="horizontal-input-group columns-2">
+            <HorizontalInputGroupLayout className="columns-2">
                 <input
                     placeholder="Titel (Optional)"
                     value={ingredientGroupModel.title}
@@ -44,7 +45,7 @@ export default function IngredientGroupListItem({
                     text={"Gruppe entfernen"}
                     buttonType={ButtonType.DarkButton}
                 />
-            </div>
+            </HorizontalInputGroupLayout>
             <IngredientListEditor
                 ingredients={ingredientGroupModel.ingredientList}
                 onChange={list => updateIngredientList(index, list)}

frontend/src/components/recipes/IngredientListEditor.tsx

@@ -2,6 +2,7 @@ import {Plus, X} from "lucide-react"
 import type {IngredientModel} from "../../models/IngredientModel"
 import Button from "../basics/Button"
 import {ButtonType} from "../basics/BasicButtonDefinitions"
+import HorizontalInputGroupLayout from "../basics/HorizontalInputGroupLayout.tsx";
 
 
 type IngredientListEditorProps = {
@@ -54,7 +55,7 @@ export function IngredientListEditor({ingredients, onChange}: IngredientListEdit
     return (
         <div>
             {ingredients.map((ing, index) => (
-                <div key={index} className="horizontal-input-group">
+                <HorizontalInputGroupLayout key={index}>
                     <input
                         type="number"
                         placeholder="Menge"
@@ -80,7 +81,7 @@ export function IngredientListEditor({ingredients, onChange}: IngredientListEdit
                         icon={X}
                         buttonType={ButtonType.DarkButton}
                     />
-                </div>
+                </HorizontalInputGroupLayout>
             ))}
             <Button
                 onClick={handleAdd}