azpect/Potion
1
1
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

(FEAT): Implemented serving size toggle

Browse Source
This commit is contained in:
Hayden Hargreaves 2025-12-28 17:56:54 -07:00
parent 54c557bec5
commit 04b6ac918a
2 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
web/src/components/items/IngredientList.tsx
View File

@ -1,16 +1,31 @@
import { Fragment } from "react/jsx-runtime"; import { Fragment } from "react/jsx-runtime";
import type { RecipeIngredient, RecipeIngredientSection } from "../../types/recipe"; import type { RecipeIngredient, RecipeIngredientSection } from "../../types/recipe";
import { useState } from "react";
interface IngredientListProps { interface IngredientListProps {
sections: RecipeIngredientSection[]; sections: RecipeIngredientSection[];
ingredients: RecipeIngredient[]; 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) { export default function IngredientList({ sections, ingredients }: IngredientListProps) {
const [scale, setScale] = useState<number>(1);
return ( return (
<> <>
<div className="px-4 py-8 md:px-8"> <div className="px-4 py-8 md:px-8">
<h2 className="text-2xl text-gray-800 font-semibold mb-2">Ingredients</h2> <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" /> <hr className="text-gray-300" />
{sections?.map(section => ( {sections?.map(section => (
<Fragment key={section.Id}> <Fragment key={section.Id}>
@ -33,7 +48,7 @@ export default function IngredientList({ sections, ingredients }: IngredientList
</svg> </svg>
</span> </span>
<span className="font-semibold mr-2"> <span className="font-semibold mr-2">
{ingredient.Amount > 0 ? ingredient.Amount : null} {ingredient.Unit} {ingredient.Amount > 0 ? (ingredient.Amount * scale) : null} {ingredient.Unit}
</span> </span>
{ingredient.Name} {ingredient.Name}
</li> </li>

2
web/src/pages/Recipe.tsx
View File

@ -59,7 +59,7 @@ export default function RecipePage() {
return recipe ? ( 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"> <div className="px-4 py-8 md:px-8">
<h1 className="text-3xl md:text-4xl font-bold text-gray-800">{recipe.Title}</h1> <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> <p className="text-sm mt-2 mb-1 text-gray-700">{author ? author.Name : "Loading..."}</p>