101 lines
4.6 KiB
Plaintext
101 lines
4.6 KiB
Plaintext
---
|
|
import SiteLayout from "@/layouts/base";
|
|
|
|
const { recipeid } = Astro.params;
|
|
|
|
// Actually post the recipe with the stored variables
|
|
async function submitRecipe() {
|
|
|
|
}
|
|
|
|
---
|
|
<script src="@/script/newRecipe.ts"/>
|
|
|
|
<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 md:flex-1/3 flex-col mt-2 md:mt-4 sticky">
|
|
<div class="relative">
|
|
<input
|
|
id="photo"
|
|
type="file"
|
|
accept="image/png,image/jpeg"
|
|
class="w-full bg-white/10 rounded-lg h-50
|
|
file:mr-4 file:py-2 file:px-4
|
|
file:rounded-lg file:border-0 file:hidden
|
|
before:content-['camera'] before:w-full before:h-full before:flex
|
|
before:items-center before:justify-center before:absolute
|
|
relative cursor-pointer
|
|
[&::-webkit-file-upload-button]:hidden"
|
|
>
|
|
</div>
|
|
<textarea
|
|
id="rec-name"
|
|
rows="1"
|
|
placeholder="Name"
|
|
class="text-[28pt] font-bold p-1 leading-none mt-2 bg-white/10 rounded-lg resize-none overflow-hidden"
|
|
oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'"
|
|
/>
|
|
<textarea
|
|
id="rec-desc"
|
|
rows="4"
|
|
placeholder="Description"
|
|
class="text-sm italic p-1 leading-none mt-2 bg-white/10 rounded-lg resize-none overflow-hidden"
|
|
oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'"
|
|
/>
|
|
<!-- if it works :3 -->
|
|
|
|
<!-- Details -->
|
|
<!-- <InfoView re={re} /> -->
|
|
|
|
<div class="flex flex-row align-middle items-center">
|
|
<p class="mt-4 text-[22pt] font-bold 'mt-4'">Ingredients</p>
|
|
<button disabled class="disabled:text-white/20 transition-colors ml-auto mt-5 text-white bg-white/10 rounded-lg px-3 py-1 " id="add-ingredient-btn" >Add</button>
|
|
</div>
|
|
<table class={`table-fixed text-left bg-[#2a2b2c] rounded-lg w-full`}>
|
|
<thead>
|
|
<tr>
|
|
<th class="px-4 py-2 w-18">Qty</th>
|
|
<th class="px-4 py-2 w-20">Unit</th>
|
|
<th class="px-4 py-2">Ingredient</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="ingredient-table" class="w-full border-t px-4 py-2 border-white/10">
|
|
<tr id="ingredient-input" class="">
|
|
<td class="px-2 py-1">
|
|
<input id="ing-qty" class="w-full h-9 my-1 bg-white/10 rounded-lg px-2 py-2" type="text" placeholder="Qty">
|
|
</td>
|
|
<td class="px-2 py-1">
|
|
<input id="ing-unit" class="w-full h-9 bg-white/10 rounded-lg px-2 py-2" type="text" placeholder="Unit">
|
|
</td>
|
|
<td class="px-2 py-1">
|
|
<!-- <textarea id="ing-name" class="w-full h-11 bg-white/20 rounded-lg px-2 py-3 mt-1 resize-none leading-tight" placeholder="Ingredient" rows="1"/> -->
|
|
<input id="ing-name" class="w-full h-9 bg-white/10 rounded-lg px-2 py-2" type="text" placeholder="Ingredient">
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="flex mt-4 md:flex-2/3 w-full flex-col md:ml-3">
|
|
<!-- <p class="hidden md:block text-[28pt] font-bold pl-5">Helloi</p> -->
|
|
|
|
<!-- Steps -->
|
|
<p class="text-[22pt] font-bold md:hidden">Steps</p>
|
|
|
|
<div class="bg-[#2a2b2c] rounded-lg mb-2 p-2">
|
|
<!-- <p class="text-bold text-[10pt]">Step</p> -->
|
|
<textarea
|
|
id="new-instruction"
|
|
class="block bg-white/10 w-full h-full rounded-lg resize-none px-3 py-1"
|
|
placeholder="New Step"
|
|
oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'"
|
|
/>
|
|
</div>
|
|
|
|
<button disabled class="disabled:text-white/20 ml-auto mb-2 transition-colors text-white bg-white/10 rounded-lg px-3 py-1 " id="add-step-btn" >Add</button>
|
|
|
|
<ul id="step-list"></ul>
|
|
</div>
|
|
|
|
</div>
|
|
</SiteLayout> |