54 lines
1.9 KiB
Plaintext
54 lines
1.9 KiB
Plaintext
---
|
|
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";
|
|
import { authPB } from "@data/pb";
|
|
|
|
const { id } = Astro.params
|
|
const pb = await authPB()
|
|
|
|
const re = await pb.collection('recipes').getOne(id as string)
|
|
|
|
let recipeData = new Recipe(re.cooklang)
|
|
|
|
const images = await Promise.all(
|
|
re.images.map(r => pb.files.getURL(re, r))
|
|
)
|
|
---
|
|
|
|
<Base>
|
|
<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">{recipeData.metadata.title ?? "Untitled Recipe"}</p>
|
|
|
|
<!-- Details -->
|
|
<InfoView
|
|
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={recipeData.ingredients ?? []} />
|
|
</div>
|
|
|
|
<div class="flex mt-4 md:flex-2/3 w-full flex-col">
|
|
<!-- Steps -->
|
|
<StepView
|
|
class="md:ml-3"
|
|
sections={recipeData.sections ?? []}
|
|
allIngredients={recipeData.ingredients ?? []}
|
|
cookware={recipeData.cookware ?? []}
|
|
timers={recipeData.timers ?? []}
|
|
/>
|
|
</div>
|
|
|
|
</div>
|
|
</Base> |