[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>
This commit is contained in:
parent
c12a4ab1aa
commit
db6df2053a
@ -2,41 +2,43 @@
|
|||||||
// const { ingredients } = Astro.props
|
// const { ingredients } = Astro.props
|
||||||
|
|
||||||
const { class: className, 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}`>
|
{!tableView && (
|
||||||
<span class="font-bold">Quantity</span>
|
<div class={`bg-[#2a2b2c] p-3 rounded-lg w-full text-left ${className}`}>
|
||||||
<span class="font-bold">Unit</span>
|
|
||||||
<span class="font-bold">Food</span>
|
|
||||||
{
|
{
|
||||||
ingredients.map(ing => (
|
ingredients.map(ing => (
|
||||||
<span>{ing.quantity}</span>
|
<div class="text-white/70">
|
||||||
<span>{ing.unit}</span>
|
<p>• {ing.quantity} {ing.unit} {ing.name}</p>
|
||||||
<span>{ing.name}</span>
|
</div>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
|
|
||||||
</div> -->
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
<table class={`table-auto text-left bg-[#2a2b2c] rounded-lg ${className} w-full`}>
|
{tableView && (
|
||||||
<thead>
|
<table class={`table-auto text-left bg-[#2a2b2c] rounded-lg ${className} w-full`}>
|
||||||
<tr>
|
<thead>
|
||||||
<th class="px-4 py-2">Quantity</th>
|
<tr>
|
||||||
<th class="px-4 py-2">Unit</th>
|
<th class="px-4 py-2">Quantity</th>
|
||||||
<th class="px-4 py-2">Food</th>
|
<th class="px-4 py-2">Unit</th>
|
||||||
</tr>
|
<th class="px-4 py-2">Ingredient</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
{
|
<tbody>
|
||||||
ingredients.map(ing => (
|
{
|
||||||
<>
|
ingredients.map(ing => (
|
||||||
<tr class="border-t border-gray-600">
|
<>
|
||||||
<td class="px-4 py-2">{ing.quantity}</td>
|
<tr class="border-t border-gray-600">
|
||||||
<td class="px-4 py-2">{ing.unit}</td>
|
<td class="px-4 py-2">{ing.quantity}</td>
|
||||||
<td class="px-4 py-2">{ing.name}</td>
|
<td class="px-4 py-2">{ing.unit}</td>
|
||||||
</tr>
|
<td class="px-4 py-2">{ing.name}</td>
|
||||||
</>
|
</tr>
|
||||||
))
|
</>
|
||||||
}
|
))
|
||||||
</tbody>
|
}
|
||||||
</table>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
)}
|
Loading…
x
Reference in New Issue
Block a user