june
0b1334d508
Add `/recipe/new` path with form to add new recipe Mostly designed but not fully: steps and ingredients are inputtable with final styling but it cannot be submitted yet, and other crucial components like description, rating, etc are not yet implemented. Many design changes too cos i couldnt help myself More additions will certainly be required but this PR is huge so I will split it out into more Reviewed-on: #11 Co-authored-by: june <self@breadone.net> Co-committed-by: june <self@breadone.net>
25 lines
983 B
Plaintext
25 lines
983 B
Plaintext
---
|
|
import { record } from "astro:schema"
|
|
import client from "@/data/pocketbase"
|
|
import StepIngredientSideView from "./StepIngredientSideView.astro"
|
|
|
|
const { steps, class: className } = Astro.props
|
|
---
|
|
|
|
<div class={className}>
|
|
<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-2/5 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> |