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

Add option to change from table to list view but idk i like the table more

Browse Source
This commit is contained in:
June 2025-08-13 19:45:28 +12:00
parent c12a4ab1aa
commit e5a5caef2c
Signed by: breadone
GPG Key ID: FDC19FE143200483
1 changed files with 32 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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}&nbsp;{ing.unit}&nbsp;{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>
)}