7ad710f880
Furthermore, not sure how we are going to handle the searching. Maybe a full-text search index? For now, it has been ignored, but the filters seem to be working properly.
83 lines
2.5 KiB
Plaintext
83 lines
2.5 KiB
Plaintext
package components
|
|
|
|
templ dropdownButton(content, name, value string) {
|
|
<label class="inline-block cursor-pointer">
|
|
<input type="checkbox" name={ name } value={ value } class="sr-only peer"/>
|
|
<span
|
|
class="peer-checked:bg-blue-600 peer-checked:text-white peer-checked:border-blue-600
|
|
px-2 py-1 border border-gray-300 rounded-lg"
|
|
>
|
|
{ content }
|
|
</span>
|
|
</label>
|
|
}
|
|
|
|
templ FilterDropdown() {
|
|
<script>
|
|
function toggleDropdown() {
|
|
const menu = document.getElementById("filter-dropdown-menu");
|
|
const button = document.getElementById("filter-dropdown-button");
|
|
|
|
if (menu.classList.contains("block")) {
|
|
menu.classList.remove("block");
|
|
menu.classList.add("hidden");
|
|
} else {
|
|
menu.classList.remove("hidden");
|
|
menu.classList.add("block");
|
|
}
|
|
}
|
|
</script>
|
|
<div id="filter-dropdown-menu" class="hidden w-full p-2 border border-gray-300 my-2 rounded-lg">
|
|
<div class="w-full border-b border-gray-300 py-2">
|
|
<h3 class="mb-1">
|
|
Meal
|
|
</h3>
|
|
<div class="flex text-xs flex-wrap gap-1">
|
|
@dropdownButton("Breakfast", "meal", "1")
|
|
@dropdownButton("Lunch", "meal", "2")
|
|
@dropdownButton("Dinner", "meal", "4")
|
|
@dropdownButton("Desert", "meal", "8")
|
|
@dropdownButton("Snack", "meal", "16")
|
|
@dropdownButton("Side", "meal", "32")
|
|
@dropdownButton("Other", "meal", "64")
|
|
</div>
|
|
</div>
|
|
<div class="w-full border-b border-gray-300 py-2">
|
|
<h3 class="mb-1">
|
|
Cook Time
|
|
</h3>
|
|
<div class="flex text-xs flex-wrap gap-1">
|
|
@dropdownButton("< 15 min", "time", "1")
|
|
@dropdownButton("15 to 30 min", "time", "2")
|
|
@dropdownButton("30 to 60 min", "time", "4")
|
|
@dropdownButton("60 to 120 min", "time", "8")
|
|
@dropdownButton("+120 min", "time", "16")
|
|
</div>
|
|
</div>
|
|
<div class="w-full border-b border-gray-300 py-2">
|
|
<h3 class="mb-1">
|
|
Difficulty
|
|
</h3>
|
|
<div class="flex text-xs flex-wrap gap-1">
|
|
@dropdownButton("Beginner", "difficulty", "1")
|
|
@dropdownButton("Easy", "difficulty", "2")
|
|
@dropdownButton("Intermediate", "difficulty", "4")
|
|
@dropdownButton("Challenging", "difficulty", "8")
|
|
@dropdownButton("Extreme", "difficulty", "16")
|
|
</div>
|
|
</div>
|
|
<div class="w-full border-b border-gray-300 py-2">
|
|
<h3 class="mb-1">
|
|
Serving Size
|
|
</h3>
|
|
<div class="flex text-xs flex-wrap gap-1">
|
|
@dropdownButton("1 to 2", "serving", "1")
|
|
@dropdownButton("2 to 4", "serving", "2")
|
|
@dropdownButton("4 to 6", "serving", "4")
|
|
@dropdownButton("6 to 8", "serving", "8")
|
|
@dropdownButton("8+", "serving", "16")
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|