From db6df2053a9275f199bcdf129b23bff365067cb4 Mon Sep 17 00:00:00 2001
From: june <self@breadone.net>
Date: Wed, 13 Aug 2025 19:46:34 +1200
Subject: [PATCH] [PIE-11] Add option to change from table to list view (!9)

Option interface not implemented, will be in a future settings page. But anyway idk i like the table view more
Co-authored-by: june <self@breadone.net>
Co-committed-by: june <self@breadone.net>
---
 .../Detail/IngredientTableView.astro          | 62 ++++++++++---------
 1 file changed, 32 insertions(+), 30 deletions(-)

diff --git a/src/components/Detail/IngredientTableView.astro b/src/components/Detail/IngredientTableView.astro
index 1f38027..5ee0c05 100644
--- a/src/components/Detail/IngredientTableView.astro
+++ b/src/components/Detail/IngredientTableView.astro
@@ -2,41 +2,43 @@
 // 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>
+)}
 
-<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>
-        </tr>
-    </thead>
-    <tbody>
-        {
-        ingredients.map(ing => (
-            <>
-                <tr class="border-t border-gray-600">
-                    <td class="px-4 py-2">{ing.quantity}</td>
-                    <td class="px-4 py-2">{ing.unit}</td>
-                    <td class="px-4 py-2">{ing.name}</td>
-                </tr>
-            </>
-        ))
-        }
-    </tbody>
-</table>
\ No newline at end of file
+{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">Ingredient</th>
+            </tr>
+        </thead>
+        <tbody>
+            {
+            ingredients.map(ing => (
+                <>
+                    <tr class="border-t border-gray-600">
+                        <td class="px-4 py-2">{ing.quantity}</td>
+                        <td class="px-4 py-2">{ing.unit}</td>
+                        <td class="px-4 py-2">{ing.name}</td>
+                    </tr>
+                </>
+            ))
+            }
+        </tbody>
+    </table>
+)}
\ No newline at end of file