Potion/internal/templates/components/dropdowns.templ

package components

import domainRecipe "github.com/haydenhargreaves/Potion/internal/domain/recipe"

// isBitActive returns true when the bit at pos (0 indexed) is true.
func isBitActive(bits, pos int) bool {
return (bits>>pos)&1 == 1
}

templ dropdownButton(content, name, value string, selected bool) {
<label class="inline-block cursor-pointer select-none">
  <input type="checkbox" name={ name } value={ value } class="sr-only peer" 
  if selected {
    checked 
  } />
  <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(filters *domainRecipe.SearchFilters) {
<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">
      if filters != nil {
        @dropdownButton("Breakfast", "meal", "1", isBitActive(filters.MealType, 0))
        @dropdownButton("Lunch", "meal", "2", isBitActive(filters.MealType, 1))
        @dropdownButton("Dinner", "meal", "4", isBitActive(filters.MealType, 2))
        @dropdownButton("Desert", "meal", "8", isBitActive(filters.MealType, 3))
        @dropdownButton("Snack", "meal", "16", isBitActive(filters.MealType, 4))
        @dropdownButton("Side", "meal", "32", isBitActive(filters.MealType, 5))
        @dropdownButton("Other", "meal", "64", isBitActive(filters.MealType, 6))
      } else {
        @dropdownButton("Breakfast", "meal", "1", false)
        @dropdownButton("Lunch", "meal", "2", false)
        @dropdownButton("Dinner", "meal", "4", false)
        @dropdownButton("Desert", "meal", "8", false)
        @dropdownButton("Snack", "meal", "16", false)
        @dropdownButton("Side", "meal", "32", false)
        @dropdownButton("Other", "meal", "64", false)
      }
    </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">
      if filters != nil {
        @dropdownButton("< 15 min", "time" , "1" , isBitActive(filters.Time, 0))
        @dropdownButton("15 to 30 min", "time", "2" , isBitActive(filters.Time, 1))
        @dropdownButton("30 to 60 min", "time" , "4" , isBitActive(filters.Time, 2))
        @dropdownButton("60 to 120 min", "time" , "8" , isBitActive(filters.Time, 3))
        @dropdownButton("+120 min", "time" , "16" , isBitActive(filters.Time, 4))
      } else {
        @dropdownButton("< 15 min", "time" , "1" , false)
        @dropdownButton("15 to 30 min", "time", "2" , false)
        @dropdownButton("30 to 60 min", "time" , "4" , false)
        @dropdownButton("60 to 120 min", "time" , "8" , false)
        @dropdownButton("+120 min", "time" , "16" , false)
      }
    </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">
        if filters != nil {
          @dropdownButton("Beginner", "difficulty", "1", isBitActive(filters.Difficulty, 0))
          @dropdownButton("Easy", "difficulty", "2", isBitActive(filters.Difficulty, 1))
          @dropdownButton("Intermediate", "difficulty", "4", isBitActive(filters.Difficulty, 2))
          @dropdownButton("Challenging", "difficulty", "8", isBitActive(filters.Difficulty, 3))
          @dropdownButton("Extreme", "difficulty", "16", isBitActive(filters.Difficulty, 4))
        } else {
          @dropdownButton("Beginner", "difficulty", "1", false)
          @dropdownButton("Easy", "difficulty", "2", false)
          @dropdownButton("Intermediate", "difficulty", "4", false)
          @dropdownButton("Challenging", "difficulty", "8", false)
          @dropdownButton("Extreme", "difficulty", "16", false)
        }
      </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">
        if filters != nil {
          @dropdownButton("1 to 2", "serving", "1", isBitActive(filters.ServingSize, 0))
          @dropdownButton("2 to 4", "serving", "2", isBitActive(filters.ServingSize, 1))
          @dropdownButton("4 to 6", "serving", "4", isBitActive(filters.ServingSize, 2))
          @dropdownButton("6 to 8", "serving", "8", isBitActive(filters.ServingSize, 3))
          @dropdownButton("8+", "serving", "16", isBitActive(filters.ServingSize, 4))
        } else {
          @dropdownButton("1 to 2", "serving", "1", false)
          @dropdownButton("2 to 4", "serving", "2", false)
          @dropdownButton("4 to 6", "serving", "4", false)
          @dropdownButton("6 to 8", "serving", "8", false)
          @dropdownButton("8+", "serving", "16", false)
        }
      </div>
    </div>
    <div class="w-full pt-2 flex justify-end items-end">
      <button type="submit"
        class="w-full text-sm md:text-base text-white rounded-lg py-1.5 md:py-2 bg-blue-600 hover:bg-blue-700 duration-300">
        Apply Filters
      </button>
    </div>
  </div>
  }