[PIE-13] New recipe page #11
@ -3,10 +3,10 @@ import { record } from "astro:schema"
|
|||||||
import client from "@/data/pocketbase"
|
import client from "@/data/pocketbase"
|
||||||
import StepIngredientSideView from "./StepIngredientSideView.astro"
|
import StepIngredientSideView from "./StepIngredientSideView.astro"
|
||||||
|
|
||||||
const { steps } = Astro.props
|
const { steps, class: className } = Astro.props
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="md:ml-5 mt-2 md:mt-0">
|
<div class={className}>
|
||||||
<p class="text-[22pt] font-bold md:hidden">Steps</p>
|
<p class="text-[22pt] font-bold md:hidden">Steps</p>
|
||||||
{ steps.map(s => (
|
{ steps.map(s => (
|
||||||
<div class="bg-[#2a2b2c] rounded-lg mb-2 p-3">
|
<div class="bg-[#2a2b2c] rounded-lg mb-2 p-3">
|
||||||
|
@ -31,7 +31,7 @@ const ingredients = 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 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">
|
<div class="flex md:flex-1/3 flex-col mt-2 md:mt-4 sticky">
|
||||||
<ImageCarousel class="w-full" recipe={re} />
|
<ImageCarousel class="w-full" recipe={re} />
|
||||||
<p class=" md:hidden text-[28pt] font-bold leading-none mt-2">{re.name}</p>
|
<p class="text-[28pt] font-bold leading-none mt-2">{re.name}</p>
|
||||||
|
|
||||||
<!-- Details -->
|
<!-- Details -->
|
||||||
<InfoView re={re} />
|
<InfoView re={re} />
|
||||||
@ -40,11 +40,9 @@ const ingredients = await Promise.all(
|
|||||||
<IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={ingredients} />
|
<IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={ingredients} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex md:flex-2/3 w-full flex-col">
|
<div class="flex mt-4 md:flex-2/3 w-full flex-col">
|
||||||
<p class="hidden md:block text-[28pt] font-bold pl-5">{re.name}</p>
|
|
||||||
|
|
||||||
<!-- Steps -->
|
<!-- Steps -->
|
||||||
<StepView steps={steps} />
|
<StepView class="md:ml-3" steps={steps} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user