src/components/Detail/IngredientTableView.astro

@@ -2,28 +2,29 @@
 // const { ingredients } = Astro.props
 
 const { class: className, ingredients } = Astro.props
+const tableView = true
 ---
 
-<!-- <div class=`bg-[#2a2b2c] rounded-lg grid grid-cols-3 text-center ${className}`>
-    <span class="font-bold">Quantity</span>
-    <span class="font-bold">Unit</span>
-    <span class="font-bold">Food</span>
+{!tableView && (
+    <div class={`bg-[#2a2b2c] p-3 rounded-lg w-full text-left ${className}`}>
     {
         ingredients.map(ing => (
-            <span>{ing.quantity}</span>
-            <span>{ing.unit}</span>
-            <span>{ing.name}</span>
+            <div class="text-white/70">
+                <p>• {ing.quantity}&nbsp;{ing.unit}&nbsp;{ing.name}</p>
+            </div>
         ))
     }
 
-</div> -->
+    </div>
+)}
 
+{tableView && (
     <table class={`table-auto text-left bg-[#2a2b2c] rounded-lg ${className} w-full`}>
         <thead>
             <tr>
                 <th class="px-4 py-2">Quantity</th>
                 <th class="px-4 py-2">Unit</th>
-            <th class="px-4 py-2">Food</th>
+                <th class="px-4 py-2">Ingredient</th>
             </tr>
         </thead>
         <tbody>
@@ -40,3 +41,4 @@ const { class: className, ingredients } = Astro.props
             }
         </tbody>
     </table>
+)}