fred/recipe_app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

edit recipe

Browse source
This commit is contained in:
fred 2025-10-20 11:43:29 -07:00
parent 798e879863
commit 8b52d31dcf
10 changed files with 389 additions and 217 deletions
Download patch file Download diff file Expand all files Collapse all files

45
frontend/src/pages/RecipePage.tsx
View file

@ -111,21 +111,37 @@ function RecipePage() {
<div className="border-b-2 border-[var(--color-primaryBorder)] pb-4">
<div className="recipe-card">
<div className="flex relative justify-between">
<button
onClick={() => { }}
className="invisible ar-button py-1 px-1 rounded self-start"
>
🗑️
</button>
<div className="invisible-buttons">
<button
onClick={() => {}}
className="invisible ar-button py-1 px-1 rounded mr-2 self-start"
>
🗑️
</button>
<button
onClick={() => {}}
className="invisible ar-button py-1 px-1 rounded self-start"
>
🗑️
</button>
</div>
<h3 className="text-center max-w-lg px-4 text-2xl lg:text-3xl font-bold text-[var(--color-textDark)]">
{recipe.details.name}
</h3>
<button
onClick={openModal}
className="ar-button bg-[var(--color-buttonBg)] text-[var(--color-textLight)] py-1 px-1 rounded hover:bg-[var(--color-buttonBgHover)] self-start"
>
🗑️
</button>
<div className="modify-buttons">
<button
onClick={() => navigate(`/edit-recipe/${recipe.details.id}`)}
className="ar-button bg-[var(--color-buttonBg)] text-[var(--color-textLight)] py-1 px-1 rounded hover:bg-[var(--color-buttonBgHover)] mr-2 self-start"
>
🔧
</button>
<button
onClick={openModal}
className="ar-button bg-[var(--color-buttonBg)] text-[var(--color-textLight)] py-1 px-1 rounded hover:bg-[var(--color-buttonBgHover)] self-start"
>
🗑️
</button>
</div>
</div>
<div className="mt-1">
<p className="text-[var(--color-textDark)] italic text-lg">
@ -146,7 +162,10 @@ function RecipePage() {
</h4>
<ul className="space-y-2">
{recipe.ingredients.map((ingredient: string, index) => (
<li key={index} className="text-[var(--color-secondaryTextDark)] flex items-start">
<li
key={index}
className="text-[var(--color-secondaryTextDark)] flex items-start"
>
<span className="w-1.5 h-1.5 bg-[var(--color-buttonBg)] rounded-full mt-2 mr-3 flex-shrink-0"></span>
<span className="font-medium text-left">{ingredient}</span>
</li>