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

[PIE-8] Add recipe detail view #6

Merged
breadone merged 17 commits from PIE-8 into main 2025-08-13 16:54:06 +12:00
Conversation 0 Commits 17 Files Changed 15 +8 -8
2 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 93e3fc6db5 - Show all commits

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

@ -18,12 +18,12 @@ const { class: className, ingredients } = Astro.props
</div> --> </div> -->
<table class={`table-auto bg-[#2a2b2c] rounded-lg ${className} w-full`}> <table class={`table-auto text-left bg-[#2a2b2c] rounded-lg ${className} w-full`}>
<thead> <thead>
<tr> <tr>
<th class="text-center px-4 py-2">Quantity</th> <th class="px-4 py-2">Quantity</th>
<th class="text-center px-4 py-2">Unit</th> <th class="px-4 py-2">Unit</th>
<th class="text-center px-4 py-2">Food</th> <th class="px-4 py-2">Food</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -31,9 +31,9 @@ const { class: className, ingredients } = Astro.props
ingredients.map(ing => ( ingredients.map(ing => (
<> <>
<tr class="border-t border-gray-600"> <tr class="border-t border-gray-600">
<td class="text-left px-4 py-2">{ing.quantity}</td> <td class="px-4 py-2">{ing.quantity}</td>
<td class="text-left px-4 py-2">{ing.unit}</td> <td class="px-4 py-2">{ing.unit}</td>
<td class="text-left px-4 py-2">{ing.name}</td> <td class="px-4 py-2">{ing.name}</td>
</tr> </tr>
</> </>
)) ))

2
src/pages/recipe/[recipeid].astro
View File

@ -41,7 +41,7 @@ const ingredients = await Promise.all(
<p class="text-[22pt] font-bold">Steps</p> <p class="text-[22pt] font-bold">Steps</p>
{ steps.map(s => ( { steps.map(s => (
<div class="bg-[#2a2b2c] rounded-lg mb-2 p-3 md:"> <div class="bg-[#2a2b2c] rounded-lg mb-2 p-3 md:">
<p>Step {s.index + 1}</p> <p class="text-bold text-[10pt]">Step {s.index + 1}</p>
<p>{s.instruction}</p> <p>{s.instruction}</p>
</div> </div>
)) } )) }