june
c12a4ab1aa
Add ingredients to each step in detailview, add tags, and some refactoring and smaller improvements Reviewed-on: #8 Co-authored-by: june <self@breadone.net> Co-committed-by: june <self@breadone.net>
51 lines
1.5 KiB
Plaintext
51 lines
1.5 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">
|
|
<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> |