Table formatting
This commit is contained in:
parent
d54b841148
commit
93e3fc6db5
@ -18,12 +18,12 @@ const { class: className, ingredients } = Astro.props
|
||||
|
||||
</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>
|
||||
<tr>
|
||||
<th class="text-center px-4 py-2">Quantity</th>
|
||||
<th class="text-center px-4 py-2">Unit</th>
|
||||
<th class="text-center px-4 py-2">Food</th>
|
||||
<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>
|
||||
@ -31,9 +31,9 @@ const { class: className, ingredients } = Astro.props
|
||||
ingredients.map(ing => (
|
||||
<>
|
||||
<tr class="border-t border-gray-600">
|
||||
<td class="text-left px-4 py-2">{ing.quantity}</td>
|
||||
<td class="text-left 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.quantity}</td>
|
||||
<td class="px-4 py-2">{ing.unit}</td>
|
||||
<td class="px-4 py-2">{ing.name}</td>
|
||||
</tr>
|
||||
</>
|
||||
))
|
||||
|
@ -41,7 +41,7 @@ const ingredients = await Promise.all(
|
||||
<p class="text-[22pt] font-bold">Steps</p>
|
||||
{ steps.map(s => (
|
||||
<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>
|
||||
</div>
|
||||
)) }
|
||||
|
Loading…
x
Reference in New Issue
Block a user