From c188639b1cf3ed97c76fd574baff423b328bc393 Mon Sep 17 00:00:00 2001
From: araemer <anika@raemer.net>
Date: Sat, 25 Oct 2025 18:17:32 +0200
Subject: [PATCH] Add ButtonGroupLayout Component

---
 frontend/src/App.css                          |  5 ----
 .../components/basics/ButtonGroupLayout.tsx   | 29 +++++++++++++++++++
 .../components/recipes/RecipeDetailPage.tsx   |  5 ++--
 .../src/components/recipes/RecipeEditor.tsx   |  5 ++--
 4 files changed, 35 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/components/basics/ButtonGroupLayout.tsx

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 4473cb9..f11b456 100644
--- a/frontend/src/App.css
+++ b/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;
     }
diff --git a/frontend/src/components/basics/ButtonGroupLayout.tsx b/frontend/src/components/basics/ButtonGroupLayout.tsx
new file mode 100644
index 0000000..b61e9b1
--- /dev/null
+++ b/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>
+    );
+}
\ No newline at end of file
diff --git a/frontend/src/components/recipes/RecipeDetailPage.tsx b/frontend/src/components/recipes/RecipeDetailPage.tsx
index bcea5cf..54426bb 100644
--- a/frontend/src/components/recipes/RecipeDetailPage.tsx
+++ b/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>
diff --git a/frontend/src/components/recipes/RecipeEditor.tsx b/frontend/src/components/recipes/RecipeEditor.tsx
index ad99bf0..6620c01 100644
--- a/frontend/src/components/recipes/RecipeEditor.tsx
+++ b/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>