c0fc47c569
Missing some context storage and better passing of data to allow between the home page to the search page. Need a way to store the search results in state so they can be retrieved when the page is reloaded, etc.
81 lines
2.7 KiB
Plaintext
81 lines
2.7 KiB
Plaintext
package components
|
|
|
|
templ dropdownButton(content, name, value string) {
|
|
<label class="inline-block cursor-pointer select-none">
|
|
<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-2">
|
|
Meal
|
|
</h3>
|
|
<div class="flex text-xs flex-wrap gap-1 gap-y-3">
|
|
@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-2">
|
|
Cook Time
|
|
</h3>
|
|
<div class="flex text-xs flex-wrap gap-1 gap-y-3">
|
|
@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-2">
|
|
Difficulty
|
|
</h3>
|
|
<div class="flex text-xs flex-wrap gap-1 gap-y-3">
|
|
@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-2">
|
|
Serving Size
|
|
</h3>
|
|
<div class="flex text-xs flex-wrap gap-1 gap-y-3">
|
|
@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>
|
|
}
|