ae11a889f6
Everything the page needs is here! This can be merged into master! It's time to move into the create page and recipe backend.
79 lines
2.0 KiB
Plaintext
79 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("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>
|
|
}
|