web/src/components/items/IngredientList.tsx

@@ -1,16 +1,31 @@
 import { Fragment } from "react/jsx-runtime";
 import type { RecipeIngredient, RecipeIngredientSection } from "../../types/recipe";
+import { useState } from "react";
 
 interface IngredientListProps {
   sections: RecipeIngredientSection[];
   ingredients: RecipeIngredient[];
 }
 
+const CLASSES_ACTIVE = "p-1 bg-blue-100 border border-blue-200 h-fit duration-300 cursor-pointer";
+const CLASSES_INACTIVE = "p-1 bg-gray-100 border border-gray-200 h-fit duration-300 cursor-pointer hover:bg-gray-200 hover:border-gray-300";
+
 export default function IngredientList({ sections, ingredients }: IngredientListProps) {
+  const [scale, setScale] = useState<number>(1);
+
   return (
     <>
       <div className="px-4 py-8 md:px-8">
+        <div className="flex justify-between items-center">
           <h2 className="text-2xl text-gray-800 font-semibold mb-2">Ingredients</h2>
+          {/* Serving size toggle */}
+          <div className="flex gap-x-1">
+            <button className={scale === 0.5 ? CLASSES_ACTIVE : CLASSES_INACTIVE} onClick={() => setScale(0.5)}> .5x </button>
+            <button className={scale === 1 ? CLASSES_ACTIVE : CLASSES_INACTIVE} onClick={() => setScale(1)}> 1x </button>
+            <button className={scale === 2 ? CLASSES_ACTIVE : CLASSES_INACTIVE} onClick={() => setScale(2)}> 2x </button>
+            <button className={scale === 3 ? CLASSES_ACTIVE : CLASSES_INACTIVE} onClick={() => setScale(3)}> 3x </button>
+          </div>
+        </div>
         <hr className="text-gray-300" />
         {sections?.map(section => (
           <Fragment key={section.Id}>
@@ -33,7 +48,7 @@ export default function IngredientList({ sections, ingredients }: IngredientList
                     </svg>
                   </span>
                   <span className="font-semibold mr-2">
-                    {ingredient.Amount > 0 ? ingredient.Amount : null} {ingredient.Unit}
+                    {ingredient.Amount > 0 ? (ingredient.Amount * scale) : null} {ingredient.Unit}
                   </span>
                   {ingredient.Name}
                 </li>

web/src/pages/Recipe.tsx

@@ -59,7 +59,7 @@ export default function RecipePage() {
 
   return recipe ? (
     <>
-      <img className="bg-gray-100 w-full h-96 mx-auto mb-8" src={RecipePlaceholder} />
+      <img className="bg-gray-100 w-full h-64 md:h-96 mx-auto mb-8" src={RecipePlaceholder} />
       <div className="px-4 py-8 md:px-8">
         <h1 className="text-3xl md:text-4xl font-bold text-gray-800">{recipe.Title}</h1>
         <p className="text-sm mt-2 mb-1 text-gray-700">{author ? author.Name : "Loading..."}</p>