add button component

frontend/src/App.css

@@ -33,12 +33,12 @@
   }
 
   /* buttons */
-  .primary-button {
-    @apply bg-blue-300 px-4 py-2 shadow-md rounded-lg hover:bg-blue-400 text-gray-600 whitespace-nowrap
-  }
-
   .default-button{
     @apply bg-gray-300 px-4 py-2 shadow-md rounded-lg hover:bg-gray-400 whitespace-nowrap text-gray-600
+  }hover:bg-gray-400
+  
+  .primary-button {
+    @apply bg-blue-300 hover:bg-blue-400 text-gray-600
   } 
 
   .dark-button{

frontend/src/components/basics/Button.tsx

@@ -0,0 +1,41 @@
+import SvgIcon, { Icon } from "./SvgIcon"
+
+type ButtonProps = {
+    onClicked: () => void,
+    icon?: Icon,
+    text?: string,
+    buttonType : ButtonType
+}
+
+export const ButtonType = {
+  DarkButton: {
+    textColor: "text-white",
+    backgroundColor: "bg-gray-600  hover:bg-gray-800"
+  },
+  PrimaryButton: {
+    textColor: "text-gray-600",
+    backgroundColor: "bg-blue-300 hover:bg-blue-400"
+  },
+  DefaultButton: {
+    textColor: "text-gray-600",
+    backgroundColor: "bg-gray-300 hover:bg-gray-400"
+  }
+} as const;
+
+export type ButtonType = typeof ButtonType[keyof typeof ButtonType];
+
+export default function Button ({onClicked, icon, text, buttonType = ButtonType.DefaultButton} : ButtonProps){
+    return(
+        <button
+            type="button"
+            className={`px-4 py-2 shadow-md rounded-lg whitespace-nowrap ${buttonType.backgroundColor} ${buttonType.textColor}`}
+            onClick={onClicked}
+        >
+            <div className="flex items-center gap-2">
+                {/* Render icon only if defined */}
+                {icon && <SvgIcon icon={icon} color={buttonType.textColor} />}
+                {text}
+            </div>
+        </button>
+    )
+}

frontend/src/components/basics/SvgIcon.tsx

@@ -8,21 +8,23 @@
  */
 export const Icon = {
   LookingGlass: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z",
-  X: "M6 18L18 6M6 6l12 12"
+  X: "M6 18L18 6M6 6l12 12",
+  Plus:  "M3 12L21 12M12 3L12 21"
 } as const;
 
 export type Icon = typeof Icon[keyof typeof Icon];
 
 type SvgIconProps = {
-    pathDefinition : string
     icon : Icon
+    color?: string // optional stroke color
+    hoverColor?: string // optional hover color, set to undefined to deactivate hover
 }
 
-export default function SvgIcon({icon} : SvgIconProps){
+export default function SvgIcon({icon, color="text-gray-400", hoverColor="text-gray-500"} : SvgIconProps){
     return (
         <svg
             xmlns="http://www.w3.org/2000/svg"
-            className="h-6 w-6 text-gray-400 hover:text-gray-500"
+            className={`h-6 w-6 ${color} ${hoverColor !== undefined ? "hover:"+hoverColor : ""}`}
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor"

frontend/src/components/recipes/IngredientGroupListEditor.tsx

@@ -4,6 +4,8 @@
 
 import type { Ingredient } from "../../types/ingredient"
 import type { IngredientGroup } from "../../types/ingredientGroup"
+import Button, { ButtonType } from "../basics/Button"
+import SvgIcon, { Icon } from "../basics/SvgIcon"
 import { IngredientListEditor } from "./IngredientListEditor"
 
 type IngredientGroupListEditorProps = {
@@ -34,7 +36,7 @@ export function IngredientGroupListEditor({ ingredientGroupList, onChange }: Ing
       {/* remove bottom margin from this headingas the group card has a top padding */}
       <h3 className="subsection-heading" >Ingredient Groups</h3>
       {ingredientGroupList.map((ingGrp, index) => (
-        <div key={index} className="ingredient-group-card">
+        <div key={index} className="ingredient-group-card mb-4">
           <div className="horizontal-input-group columns-2">
             <input
               className="input-field"
@@ -56,13 +58,30 @@ export function IngredientGroupListEditor({ ingredientGroupList, onChange }: Ing
           />
         </div>
       ))}
-      <button
+      <Button 
+        onClicked={handleAdd}
+        icon={Icon.Plus}
+        text={"Add Ingredient Group"}
+        buttonType={ButtonType.PrimaryButton}
+      />
+    </div>
+  )
+}
+
+/*
+
+<button
         type="button"
         className="primary-button mt-4"
         onClick={handleAdd}
       >
-        ➕ Add Ingredient Group
-      </button>
+        <div 
+        className="flex col-2 gap-2 -ml-1"
+        >
+          <SvgIcon
+            icon={Icon.Plus}
+            color={"text-gray-600"}
+          />
+          Add Ingredient Group
         </div>
-  )
-}
+      </button>*/

frontend/src/components/recipes/IngredientListEditor.tsx

@@ -1,4 +1,6 @@
 import type { Ingredient } from "../../types/ingredient"
+import Button, { ButtonType } from "../basics/Button"
+import SvgIcon, { Icon } from "../basics/SvgIcon"
 
 /** 
  * Editor for handling the ingredient list
@@ -54,17 +56,18 @@ export function IngredientListEditor({ ingredients, onChange }: IngredientListEd
             className="dark-button"
             onClick={() => handleRemove(index)}
           >
-            ✖
+            <SvgIcon
+              icon = {Icon.X}
+            />
           </button>
         </div>
       ))}
-      <button
-        type="button"
-        className="primary-button"
-        onClick={handleAdd}
-      >
-        ➕ Add Ingredient
-      </button>
+      <Button 
+        onClicked={handleAdd}
+        icon={Icon.Plus}
+        text={"Add Ingredient"}
+        buttonType={ButtonType.PrimaryButton}
+      />
     </div>
   )
 }