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

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

@ -2,28 +2,29 @@
// 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 && (
<table class={`table-auto text-left bg-[#2a2b2c] rounded-lg ${className} w-full`}>
<thead> <thead>
<tr> <tr>
<th class="px-4 py-2">Quantity</th> <th class="px-4 py-2">Quantity</th>
<th class="px-4 py-2">Unit</th> <th class="px-4 py-2">Unit</th>
<th class="px-4 py-2">Food</th> <th class="px-4 py-2">Ingredient</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -39,4 +40,5 @@ const { class: className, ingredients } = Astro.props
)) ))
} }
</tbody> </tbody>
</table> </table>
)}