Add ingredients as rows to the column, and reset the form

src/pages/recipe/new.astro

@@ -1,10 +1,5 @@
 ---
-import client from "@/data/pocketbase";
 import SiteLayout from "@/layouts/base";
-import ImageCarousel from "@/components/Detail/ImageCarousel";
-import IngredientTableView from "@/components/Detail/IngredientTableView";
-import StepView from "@/components/Detail/StepView";
-import InfoView from "@/components/Detail/InfoView";
 
 const { recipeid } = Astro.params;
 
@@ -17,6 +12,8 @@ async function submitRecipe() {
 
 <script>
     let ingredientFields: HTMLInputElement[] = []
+    let ingredientTable: HTMLTableSectionElement = document.querySelector('#ingredient-table')!
+    let ingredientAddButton: HTMLButtonElement = document.querySelector('#add-ingredient-btn')!
     
     document.addEventListener('DOMContentLoaded', function() {
         
@@ -34,24 +31,36 @@ async function submitRecipe() {
     
     let ingredients: {qty: string, unit: string, name: string}[] = []
     function addIngredient() {
-        ingredients.push({
+        const ing = {
             qty: ingredientFields[0].value,
             unit: ingredientFields[1].value,
             name: ingredientFields[2].value
-        })
+        }
-        console.log(ingredients)
+
+        ingredients.push(ing)
+        
+        // Create the table row HTML directly
+        const newRow = document.createElement('tr')
+        newRow.innerHTML = `
+            <td class="px-2 py-1 border-t border-white/10">${ing.qty}</td>
+            <td class="px-2 py-1 border-t border-white/10">${ing.unit}</td>
+            <td class="px-2 py-1 border-t border-white/10">${ing.name}</td>
+        `
+        
+        ingredientTable.appendChild(newRow)
+
+        ingredientFields.forEach(f => f.value = "")
+        ingredientAddButton.style.display = 'none'
     }
 
     function showAddIngredientButton() {
         // only show if there is text in the field
-        console.log(ingredientFields[2].value === "")
+
         if (ingredientFields[0].value && ingredientFields[2].value) {
-            (document.querySelector('#add-ingredient-btn') as HTMLButtonElement).style.display = 'block'
+            ingredientAddButton.style.display = 'block'
         } else {
-            (document.querySelector('#add-ingredient-btn') as HTMLButtonElement).style.display = 'hidden'
+            ingredientAddButton.style.display = 'hidden'
         }
-        
-    
     }
 </script>
 
@@ -82,7 +91,7 @@ async function submitRecipe() {
             <table class={`table-fixed  text-left bg-[#2a2b2c] rounded-lg w-full`}>
                 <thead>
                     <tr>
-                        <th class="px-4 py-2 w-25">Quantity</th>
+                        <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>
@@ -96,7 +105,8 @@ async function submitRecipe() {
                             <input id="ing-unit" class="w-full h-11 bg-white/20 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"/>
+                            <!-- <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-11 bg-white/20 rounded-lg px-2 py-2" type="text" placeholder="Ingredient">
                         </td>
                     </tr>
                 </tbody>