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>
25 lines
976 B
Plaintext
25 lines
976 B
Plaintext
---
|
|
import { record } from "astro:schema"
|
|
import client from "@/data/pocketbase"
|
|
import StepIngredientSideView from "./StepIngredientSideView.astro"
|
|
|
|
const { steps } = Astro.props
|
|
---
|
|
|
|
<div class="md:ml-5 mt-2 md:mt-0">
|
|
<p class="text-[22pt] font-bold md:hidden">Steps</p>
|
|
{ steps.map(s => (
|
|
<div class="bg-[#2a2b2c] rounded-lg mb-2 p-3">
|
|
<p class="text-bold text-[10pt]">Step {s.index + 1}</p>
|
|
|
|
<div class="flex flex-col md:flex-row md:items-stretch">
|
|
<p class="w-full md:flex-2/3 pr-1 text-left">{s.instruction}</p>
|
|
{s.ingredients && s.ingredients.length > 0 && (
|
|
<div class="w-full md:w-auto md:flex-1/3 mt-2 md:mt-0 md:ml-2 md:pl-3 md:border-l text-white/70 border-white/70">
|
|
<StepIngredientSideView class="text-left" ingredients={s.ingredients} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)) }
|
|
</div> |