june
db6df2053a
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>
44 lines
1.2 KiB
Plaintext
44 lines
1.2 KiB
Plaintext
---
|
|
// 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} {ing.unit} {ing.name}</p>
|
|
</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">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>
|
|
)} |