From ee3ac34e4b7959a6102a9a64d608871d995d7bae Mon Sep 17 00:00:00 2001
From: Anika Raemer <araemer@laptop-anika.raemer.net>
Date: Sun, 21 Sep 2025 11:01:52 +0200
Subject: [PATCH] add button link for customized Link looking like a Button

---
 frontend/src/components/basics/Button.tsx     | 39 +++++++++++--------
 frontend/src/components/basics/ButtonLink.tsx |  0
 .../components/recipes/RecipeDetailPage.tsx   | 21 +++++-----
 .../components/recipes/RecipeListToolbar.tsx  |  2 +-
 4 files changed, 34 insertions(+), 28 deletions(-)
 create mode 100644 frontend/src/components/basics/ButtonLink.tsx

diff --git a/frontend/src/components/basics/Button.tsx b/frontend/src/components/basics/Button.tsx
index 16922dc..c186039 100644
--- a/frontend/src/components/basics/Button.tsx
+++ b/frontend/src/components/basics/Button.tsx
@@ -4,31 +4,38 @@ type ButtonProps = {
     onClick: () => void,
     icon?: Icon,
     text?: string,
-    buttonType? : ButtonType
+    buttonType?: ButtonType
+    className?: string
 }
 
 export const ButtonType = {
-  DarkButton: {
-    textColor: "dark-button-text",
-    backgroundColor: "dark-button-bg"
-  },
-  PrimaryButton: {
-    textColor: "primary-button-text",
-    backgroundColor: "primary-button-bg"
-  },
-  DefaultButton: {
-    textColor: "default-button-text",
-    backgroundColor: "default-button-bg"
-  }
+    DarkButton: {
+        textColor: "dark-button-text",
+        backgroundColor: "dark-button-bg"
+    },
+    PrimaryButton: {
+        textColor: "primary-button-text",
+        backgroundColor: "primary-button-bg"
+    },
+    DefaultButton: {
+        textColor: "default-button-text",
+        backgroundColor: "default-button-bg"
+    }
 } as const;
 
 export type ButtonType = typeof ButtonType[keyof typeof ButtonType];
 
-export default function Button ({onClick: onClick, icon, text, buttonType = ButtonType.DefaultButton} : ButtonProps){
-    return(
+export default function Button(
+    { 
+        onClick: onClick, 
+        icon, text, 
+        buttonType = ButtonType.DefaultButton, 
+        className = "" 
+    }: ButtonProps) {
+    return (
         <button
             type="button"
-            className={`basic-button ${buttonType.backgroundColor} ${buttonType.textColor}`}
+            className={`basic-button ${buttonType.backgroundColor} ${buttonType.textColor} ${className}`}
             onClick={onClick}
         >
             <div className="flex items-center gap-2">
diff --git a/frontend/src/components/basics/ButtonLink.tsx b/frontend/src/components/basics/ButtonLink.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/components/recipes/RecipeDetailPage.tsx b/frontend/src/components/recipes/RecipeDetailPage.tsx
index f732760..8e54bc2 100644
--- a/frontend/src/components/recipes/RecipeDetailPage.tsx
+++ b/frontend/src/components/recipes/RecipeDetailPage.tsx
@@ -3,6 +3,7 @@ import type { Recipe } from "../../types/recipe"
 import { useEffect, useState } from "react"
 import { fetchRecipe } from "../../api/recipePoint"
 import { getRecipeEditUrl, getRecipeListUrl } from "../../routes"
+import ButtonLink from "../basics/ButtonLink"
 
 
 /**
@@ -123,18 +124,16 @@ export default function RecipeDetailPage() {
 
       {/* Action buttons */}
       <div className="button-group">
-        <Link
-          to={ getRecipeEditUrl(recipe.id) }
-          className="basic-button primary-button-bg primary-button-text"
-        >
-          Bearbeiten
-        </Link>
-        <Link
+        <ButtonLink
+          to={getRecipeEditUrl(recipe.id)}
+          className="basic-button primary-button-bg primary-button-text" 
+          text="Bearbeiten"
+        />
+        <ButtonLink
           to={getRecipeListUrl()}
-          className="basic-button default-button-bg default-button-text"
-        >
-          Zurueck
-        </Link>
+          className="basic-button default-button-bg default-button-text" 
+          text="Zurueck"        
+        />
       </div>
 
     </div>
diff --git a/frontend/src/components/recipes/RecipeListToolbar.tsx b/frontend/src/components/recipes/RecipeListToolbar.tsx
index 48cdedf..d3edf56 100644
--- a/frontend/src/components/recipes/RecipeListToolbar.tsx
+++ b/frontend/src/components/recipes/RecipeListToolbar.tsx
@@ -26,7 +26,7 @@ export default function RecipeListToolbar({onSearchStringChanged, onAddClicked,
                 </div>
                 <Button
                     buttonType = {ButtonType.PrimaryButton}
-                    //className="flex-shrink-0"
+                    className="flex-shrink-0"
                     onClick={onAddClicked}
                     text = "Add recipe"
                 />