breadone/Recipie
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[PIE-11] Add option to change from table to list view but idk i like the table more #9

Merged
breadone merged 1 commits from PIE-11 into main 2025-08-13 19:46:34 +12:00
Conversation 0 Commits 1 Files Changed 1 +32 -30
1 changed files with 32 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit e5a5caef2c - Show all commits

62
src/components/Detail/IngredientTableView.astro
View File

@ -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>
{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>
)}