Started adding new recipe page but god this sucks

web/src/pages/recipe/new.astro

@@ -0,0 +1,75 @@
+---
+import Base from "@layout/Base";
+import { authPB } from "@data/pb";
+
+const pb = await authPB()
+
+const templateHeaders = `
+---
+title: 
+description: 
+cook time: 
+prep time: 
+course: 
+servings: 
+tags:
+ - 
+---
+`
+---
+
+<script is:inline>
+    document.querySelector('#btn-save')?.addEventListener('onclick', () => {
+        console.log("hi")
+    })
+</script>
+
+<Base>
+    <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 sticky">
+            
+            <div class="flex mb-2 items-center">
+                <p class="text-[28pt] mr-auto">New Recipe</p>
+                <button
+                    id="btn-save"
+                    class="px-3 py-2 bg-white/10 hover:bg-white/20 active:bg-white/30 transition-colors rounded-lg"
+                >
+                    Save
+                </button>
+            </div>
+            
+            <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>
+            
+            
+            
+        </div>
+        
+        <div class="flex mt-4 md:mt-16 md:flex-2/3 w-full flex-col md:ml-3">
+            
+            <!-- Steps -->
+            
+            <div class="bg-[#2a2b2c] rounded-lg mb-2 p-2">
+                <textarea
+                id="cooklang"
+                rows="13"
+                class="block  w-full rounded-lg px-3 py-1 font-mono resize-none"
+                oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'">{templateHeaders}</textarea>
+            </div>
+            
+            <p class="text-sm italic text-white/40">Recipie uses <a class="underline" href="https://cooklang.org">Cooklang.</a> Visit the documentation to learn more.</p>
+        </div>
+    </div>
+</Base>