add button link for customized Link looking like a Button

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: {
+    DarkButton: {
-    textColor: "dark-button-text",
+        textColor: "dark-button-text",
-    backgroundColor: "dark-button-bg"
+        backgroundColor: "dark-button-bg"
-  },
+    },
-  PrimaryButton: {
+    PrimaryButton: {
-    textColor: "primary-button-text",
+        textColor: "primary-button-text",
-    backgroundColor: "primary-button-bg"
+        backgroundColor: "primary-button-bg"
-  },
+    },
-  DefaultButton: {
+    DefaultButton: {
-    textColor: "default-button-text",
+        textColor: "default-button-text",
-    backgroundColor: "default-button-bg"
+        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){
+export default function Button(
-    return(
+    { 
+        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">

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
+        <ButtonLink
-          to={ getRecipeEditUrl(recipe.id) }
+          to={getRecipeEditUrl(recipe.id)}
-          className="basic-button primary-button-bg primary-button-text"
+          className="basic-button primary-button-bg primary-button-text" 
-        >
+          text="Bearbeiten"
-          Bearbeiten
+        />
-        </Link>
+        <ButtonLink
-        <Link
           to={getRecipeListUrl()}
-          className="basic-button default-button-bg default-button-text"
+          className="basic-button default-button-bg default-button-text" 
-        >
+          text="Zurueck"        
-          Zurueck
+        />
-        </Link>
       </div>
 
     </div>

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"
                 />