From 58b25c581f95422b164848fb6641858ed2692116 Mon Sep 17 00:00:00 2001
From: june <self@breadone.net>
Date: Sun, 17 Aug 2025 20:21:56 +1200
Subject: [PATCH] Add small details fields

---
 src/pages/recipe/new.astro | 32 ++++++++++++++++++++++++++++----
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/pages/recipe/new.astro b/src/pages/recipe/new.astro
index 1c8243c..3547dfc 100644
--- a/src/pages/recipe/new.astro
+++ b/src/pages/recipe/new.astro
@@ -28,6 +28,8 @@ async function submitRecipe() {
                            [&::-webkit-file-upload-button]:hidden"
                 >
             </div>
+
+            <!-- Details -->
             <textarea
                 id="rec-name"
                 rows="1"
@@ -37,15 +39,37 @@ async function submitRecipe() {
             />
             <textarea
                 id="rec-desc"
-                rows="4"
+                rows="3"
                 placeholder="Description"
-                class="text-sm italic p-1 leading-none mt-2 bg-white/10 rounded-lg resize-none overflow-hidden"
+                class="text-sm italic leading-none mt-2 bg-white/10 rounded-lg resize-none overflow-hidden p-2"
                 oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'"
             />
                 <!-- if it works :3  -->
 
-            <!-- Details -->
-            <!-- <InfoView re={re} /> -->
+            <!-- Smaller details -->
+            <div class="flex mt-2 h-9 space-x-2">
+                <input
+                    type="number"
+                    class="bg-white/10 px-2 rounded-lg w-24 overflow-hidden"
+                    placeholder="Servings"
+                />
+                <input
+                    type="text"
+                    class="bg-white/10 px-2 rounded-lg w-24 overflow-hidden"
+                    placeholder="Work Time"
+                />
+                <input
+                    type="text"
+                    class="bg-white/10 px-2 rounded-lg w-24 overflow-hidden"
+                    placeholder="Wait Time"
+                />
+                <input
+                    type="number"
+                    class="bg-white/10 px-2 rounded-lg w-23 overflow-hidden"
+                    placeholder="Rating"
+                />
+            </div>
+
 
             <div class="flex flex-row align-middle items-center">
                 <p class="mt-4 text-[22pt] font-bold 'mt-4'">Ingredients</p>