42 lines
1.2 KiB
Plaintext
42 lines
1.2 KiB
Plaintext
---
|
|
// const { ingredients } = Astro.props
|
|
|
|
const { class: className, ingredients } = Astro.props
|
|
---
|
|
|
|
<!-- <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>
|
|
{
|
|
ingredients.map(ing => (
|
|
<span>{ing.quantity}</span>
|
|
<span>{ing.unit}</span>
|
|
<span>{ing.name}</span>
|
|
))
|
|
}
|
|
|
|
</div> -->
|
|
|
|
<table class={`table-auto bg-[#2a2b2c] rounded-lg ${className} w-full`}>
|
|
<thead>
|
|
<tr>
|
|
<th class="text-center px-4 py-2">Quantity</th>
|
|
<th class="text-center px-4 py-2">Unit</th>
|
|
<th class="text-center px-4 py-2">Food</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{
|
|
ingredients.map(ing => (
|
|
<>
|
|
<tr class="border-t border-gray-600">
|
|
<td class="text-left px-4 py-2">{ing.quantity}</td>
|
|
<td class="text-left px-4 py-2">{ing.unit}</td>
|
|
<td class="text-left px-4 py-2">{ing.name}</td>
|
|
</tr>
|
|
</>
|
|
))
|
|
}
|
|
</tbody>
|
|
</table> |