b17c5774e9
Most everything is implemented, included a state handler and a pretty simple (but workable) system for managing state in HTML. Nice and simple for now. There is still much work to be done, but the rest is simple backend creation and error handling. And then input validation...a nightmare.
80 lines
2.0 KiB
Plaintext
80 lines
2.0 KiB
Plaintext
package components
|
|
|
|
templ dropdownButton(name string) {
|
|
<button
|
|
class="px-2 py-1 border border-gray-300 rounded-lg focus:outline-2
|
|
focus:outline-blue-500 focus:bg-blue-200"
|
|
>
|
|
{ name }
|
|
</button>
|
|
}
|
|
|
|
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")
|
|
@dropdownButton("Lunch")
|
|
@dropdownButton("Dinner")
|
|
@dropdownButton("Desert")
|
|
@dropdownButton("Snack")
|
|
@dropdownButton("Side")
|
|
@dropdownButton("Other")
|
|
</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")
|
|
@dropdownButton("15 to 30 min")
|
|
@dropdownButton("30 to 60 min")
|
|
@dropdownButton("60 to 120 min")
|
|
@dropdownButton("+120 min")
|
|
</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")
|
|
@dropdownButton("Easy")
|
|
@dropdownButton("Intermediate")
|
|
@dropdownButton("Challegening")
|
|
@dropdownButton("Extreme")
|
|
</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")
|
|
@dropdownButton("1 to 4")
|
|
@dropdownButton("4 to 6")
|
|
@dropdownButton("6 to 8")
|
|
@dropdownButton("8+")
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|