june
26cab10c14
Each row in the table can be clicked/tapped to be crossed off to complete Co-authored-by: june <self@breadone.net> Co-committed-by: june <self@breadone.net>
68 lines
1.8 KiB
Plaintext
68 lines
1.8 KiB
Plaintext
---
|
|
// const { ingredients } = Astro.props
|
|
|
|
const { class: className, ingredients } = Astro.props
|
|
const tableView = true
|
|
---
|
|
|
|
{!tableView && (
|
|
<div class={`bg-[#2a2b2c] p-3 rounded-lg w-full text-left ${className}`}>
|
|
{
|
|
ingredients.map(ing => (
|
|
<div class="text-white/70">
|
|
<p>• {ing.quantity} {ing.unit} {ing.name}</p>
|
|
</div>
|
|
))
|
|
}
|
|
|
|
</div>
|
|
)}
|
|
|
|
{tableView && (
|
|
<table class={`table-auto text-left bg-[#2a2b2c] rounded-lg ${className}`}>
|
|
<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, index) => (
|
|
<>
|
|
<tr class="border-t border-white/10 cursor-pointer hover:bg-white/10 transition-opacity ingredient-row" data-index={index}>
|
|
<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>
|
|
)}
|
|
|
|
<style>
|
|
.ingredient-row.completed {
|
|
/* background-color: rgba(0, 0, 0, 0.4) !important; */
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.ingredient-row.completed td {
|
|
text-decoration: line-through;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const rows = document.querySelectorAll('.ingredient-row');
|
|
|
|
rows.forEach(row => {
|
|
row.addEventListener('click', function() {
|
|
this.classList.toggle('completed');
|
|
});
|
|
});
|
|
});
|
|
</script> |