breadone/Recipie2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adapt step views!

Browse Source
This commit is contained in:
June
2025-11-17 15:07:34 +13:00
parent a6e9597d6f
commit 4eeb34f8c8
3 changed files with 88 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
web/src/pages/recipe/[id].astro
View File

@@ -2,6 +2,7 @@
import Base from "@layout/Base";
import ImageCarousel from "@component/detail/ImageCarousel";
import InfoView from "@component/detail/InfoView";
import StepView from "@component/detail/StepView";
import IngredientTableView from '@component/detail/IngredientTableView'
import { Recipe } from "@tmlmt/cooklang-parser";
@@ -11,7 +12,8 @@ const { id } = Astro.params
const pb = await authPB()
const re = await pb.collection('recipes').getOne(id as string)
const recipe = new Recipe(re.cooklang)
let recipeData = new Recipe(re.cooklang)
const images = await Promise.all(
re.images.map(r => pb.files.getURL(re, r))
@@ -22,24 +24,30 @@ const images = await Promise.all(
<div class="flex flex-col md:flex-row mx-auto justify-center w-full lg:max-w-3/4 xl:max-w-2/3 2xl:max-w-1/2">
<div class="flex md:flex-1/3 flex-col mt-2 md:mt-4 sticky">
<ImageCarousel class="w-full" images={images} />
<p class="text-[28pt] font-bold leading-11 mt-2">{recipe.metadata.title ?? "Untitled Recipe"}</p>
<p class="text-[28pt] font-bold leading-11 mt-2">{recipeData.metadata.title ?? "Untitled Recipe"}</p>
<!-- Details -->
<InfoView
prepTime={recipe.metadata["prep time"]}
cookTime={recipe.metadata["cook time"]}
description={recipe.metadata.description}
servings={recipe.metadata.servings}
tags={recipe.metadata.tags}
prepTime={recipeData.metadata?.["prep time"]}
cookTime={recipeData.metadata?.["cook time"]}
description={recipeData.metadata?.description}
servings={recipeData.metadata?.servings}
tags={recipeData.metadata?.tags}
/>
<p class="text-[22pt] font-bold 'md:mt-4'">Ingredients</p>
<IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={recipe.ingredients ?? []} />
<IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={recipeData.ingredients ?? []} />
</div>
<div class="flex mt-4 md:flex-2/3 w-full flex-col">
<!-- Steps -->
<!-- <StepView class="md:ml-3" steps={re.expand.steps ?? []} /> -->
<StepView
class="md:ml-3"
sections={recipeData.sections ?? []}
allIngredients={recipeData.ingredients ?? []}
cookware={recipeData.cookware ?? []}
timers={recipeData.timers ?? []}
/>
</div>
</div>