add ingredient table view

web/src/components/detail/IngredientTableView.astro

@@ -0,0 +1,68 @@
+---
+// const { ingredients } = Astro.props
+
+const { class: className, ingredients } = Astro.props
+const tableView = true
+---
+
+{!tableView && (
+    <div class={`bg-[#2a2b2c] p-3 rounded-lg w-full text-left ${className}`}>
+    {
+        ingredients.map(ing => (
+            <div class="text-white/70">
+                <p>• {ing.quantity.value.value}&nbsp;{ing.unit || ''}&nbsp;{ing.name}</p>
+            </div>
+        ))
+    }
+
+    </div>
+)}
+
+{tableView && (
+    <table class={`table-auto text-left bg-[#2a2b2c] rounded-lg ${className}`}>
+        <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, index) => (
+                <>
+                    <tr class="border-t border-white/10 cursor-pointer hover:bg-white/10 transition-opacity ingredient-row" data-index={index}>
+                        <td class="px-4 py-2">{ing.quantity.value.value}</td>
+                        <td class="px-4 py-2">{ing.unit || ''}</td>
+                        <td class="px-4 py-2">{ing.name}</td>
+                    </tr>
+                </>
+            ))
+            }
+        </tbody>
+    </table>
+)}
+
+<style>
+    .ingredient-row.completed {
+        /* background-color: rgba(0, 0, 0, 0.4) !important; */
+        opacity: 0.6;
+    }
+    
+    .ingredient-row.completed td {
+        text-decoration: line-through;
+        color: rgba(255, 255, 255, 0.5);
+    }
+</style>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const rows = document.querySelectorAll('.ingredient-row');
+        
+        rows.forEach(row => {
+            row.addEventListener('click', function() {
+                this.classList.toggle('completed');
+            });
+        });
+    });
+</script>

web/src/pages/recipe/[id].astro

@@ -2,6 +2,8 @@
 import Base from "@layout/Base";
 import ImageCarousel from "@component/detail/ImageCarousel";
 import InfoView from "@component/detail/InfoView";
+import IngredientTableView from '@component/detail/IngredientTableView'
+
 import { Recipe } from "@tmlmt/cooklang-parser";
 import { authPB } from "@data/pb";
 
@@ -32,7 +34,7 @@ const images = await Promise.all(
             />
 
             <p class="text-[22pt] font-bold 'md:mt-4'">Ingredients</p>
-            <!-- <IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={re.expand.ingredients ?? []}  /> -->
+            <IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={recipe.ingredients ?? []}  />
         </div>
         
         <div class="flex mt-4 md:flex-2/3 w-full flex-col">