51 lines
1.6 KiB
Plaintext
51 lines
1.6 KiB
Plaintext
---
|
|
import client from "@/data/pocketbase";
|
|
import SiteLayout from "@/layouts/base";
|
|
import ImageCarousel from "@/components/Detail/ImageCarousel";
|
|
import IngredientTableView from "@/components/Detail/IngredientTableView";
|
|
import StepView from "@/components/Detail/StepView";
|
|
import InfoView from "@/components/Detail/InfoView";
|
|
|
|
const { recipeid } = Astro.params;
|
|
|
|
const re = await client.collection("recipes").getOne(recipeid ?? "0");
|
|
|
|
const stepIds = re.steps
|
|
|
|
let steps = await Promise.all(
|
|
stepIds.map(async s =>
|
|
await client.collection("steps").getOne(s)
|
|
)
|
|
)
|
|
|
|
steps = steps.sort((a, b) => a.index - b.index);
|
|
|
|
const ingredients = await Promise.all(
|
|
re.ingredients.map(async s =>
|
|
await client.collection("ingredients").getOne(s)
|
|
)
|
|
)
|
|
---
|
|
|
|
<SiteLayout>
|
|
<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 flex-col mt-2 md:mt-4 sticky">
|
|
<ImageCarousel class="w-full" recipe={re} />
|
|
<p class=" md:hidden text-[28pt] font-bold leading-none mt-2">{re.name}</p>
|
|
|
|
<!-- Details -->
|
|
<InfoView re={re} />
|
|
|
|
<p class="text-[22pt] font-bold 'md:mt-4'">Ingredients</p>
|
|
<IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={ingredients} />
|
|
</div>
|
|
|
|
<div class="flex w-full flex-col">
|
|
<p class="hidden md:block text-[28pt] font-bold pl-5">{re.name}</p>
|
|
|
|
<!-- Steps -->
|
|
<StepView steps={steps} />
|
|
</div>
|
|
|
|
</div>
|
|
</SiteLayout> |