Add ButtonGroupLayout Component

frontend/src/App.css

@@ -48,11 +48,6 @@
     }
 
     /* @todo replace by components!
-    /* groups */
-    .button-group {
-        @apply flex gap-4 mt-8;
-    }
-
     .horizontal-input-group {
         @apply flex gap-2 mb-2 items-center;
     }

frontend/src/components/basics/ButtonGroupLayout.tsx

@@ -0,0 +1,29 @@
+import type {ReactNode} from "react";
+import clsx from "clsx";
+
+type ButtonGroupLayoutProps = {
+    /** Content to render inside the header */
+    children: ReactNode;
+
+    /** Optional additional Tailwind classes */
+    className?: string;
+};
+
+/**
+ * A layout for horizontally aligning buttons as usually a save button is accompanied by a cancel button
+ * @param children Children of the layout, i.e., buttons
+ * @param className Optional additional styles
+ * @constructor
+ */
+export default function ButtonGroupLayout({children, className = ""}: ButtonGroupLayoutProps) {
+    return (
+        <div
+            className={clsx(
+                "flex gap-4 mt-8",
+                className
+            )}
+        >
+            {children}
+        </div>
+    );
+}

frontend/src/components/recipes/RecipeDetailPage.tsx

@@ -9,6 +9,7 @@ import {NumberStepControl} from "../basics/NumberStepControl.tsx";
 import {NumberedListItem} from "../basics/NumberedListItem.tsx";
 import {ButtonType} from "../basics/BasicButtonDefinitions.ts";
 import StickyHeader from "../basics/StickyHeader.tsx";
+import ButtonGroupLayout from "../basics/ButtonGroupLayout.tsx";
 
 
 /**
@@ -141,7 +142,7 @@ export default function RecipeDetailPage() {
                     </ol>
 
                     {/* Action buttons */}
-                    <div className="button-group">
+                    <ButtonGroupLayout>
                         <ButtonLink
                             to={recipe.id !== undefined ? getRecipeEditUrl(recipe.id) : getRecipeListUrl()} // @todo show error instead
                             buttonType={ButtonType.PrimaryButton}
@@ -151,7 +152,7 @@ export default function RecipeDetailPage() {
                             to={getRecipeListUrl()}
                             text="Zurueck"
                         />
-                    </div>
+                    </ButtonGroupLayout>
                 </div>
             </div>
         </div>

frontend/src/components/recipes/RecipeEditor.tsx

@@ -6,6 +6,7 @@ import Button from "../basics/Button"
 import {InstructionStepListEditor} from "./InstructionStepListEditor"
 import type {InstructionStepModel} from "../../models/InstructionStepModel"
 import {ButtonType} from "../basics/BasicButtonDefinitions"
+import ButtonGroupLayout from "../basics/ButtonGroupLayout.tsx";
 
 type RecipeEditorProps = {
     recipe: RecipeModel
@@ -141,7 +142,7 @@ export default function RecipeEditor({recipe, onSave, onCancel}: RecipeEditorPro
                     />
 
 
-                    <div className="button-group">
+                    <ButtonGroupLayout>
                         {/* Save Button */}
                         <Button
                             onClick={() => handleSave(draft)}
@@ -152,7 +153,7 @@ export default function RecipeEditor({recipe, onSave, onCancel}: RecipeEditorPro
                             onClick={() => onCancel()}
                             text={"Abbrechen"}
                         />
-                    </div>
+                    </ButtonGroupLayout>
                 </div>
             </div>
         </div>