How to add a count to filters in Phoenix (visual representation)?

[eshans]

Hi all,

I’ve been tasked with showing the number of filters that have been clicked in a navbar (picture attached). Here’s the code I am working from. Is this something simple-ish like you’d do in Javascript or is a lot hairier? Thanks

  def render(assigns) do
    ~H"""
    <div class="flex items-center">
      <p class="hidden text-gray-abbey font-semibold gx:block">Filter By:</p>

      <button class="bg-white border border-gray-medium rounded-full py-0.5 px-1 flex items-center gx:ml-1" id="all-filters-menu-button" type="button" phx-click="toggle_filter_menu" phx-value-menu="all_filters">
        <span aria-hidden="true">
          <.fa_icon class="fa-sliders-simple" />
        </span>

        <span class="ml-0.5 font-medium text-sm">All Filters</span>
      </button>

      <div class="hidden items-center space-x-1 gx:flex gx:ml-1">
        <.dropdown_menu button_text="Degree" id="college-degree-filter" show?={@menu_shown == :degree} toggle_event="toggle_filter_menu" phx_value_menu="degree">
          <.live_component module={LevelWeb.CollegesNewLive.Filters.DegreeFilter} id="college_degree_filter" slug="filters-bar" college_filter={@college_filter} embedded?={false} />
        </.dropdown_menu>

        <.dropdown_menu button_text="Location" id="college-location-filter" show?={@menu_shown == :location} toggle_event="toggle_filter_menu" phx_value_menu="location">
          <.live_component module={LevelWeb.CollegesNewLive.Filters.LocationFilter} id="college_location_filter" slug="filters-bar" college_filter={@college_filter} embedded?={false} />
        </.dropdown_menu>

        <.dropdown_menu button_text="Admissions" id="college-admissions-filter" show?={@menu_shown == :admissions} toggle_event="toggle_filter_menu" phx_value_menu="admissions">
          <.live_component module={LevelWeb.CollegesNewLive.Filters.AdmissionsFilter} id="college_admission_filter" slug="filters-bar" college_filter={@college_filter} embedded?={false} />
        </.dropdown_menu>

        <.dropdown_menu button_text="Campus Life" id="college-campus-life-filter" show?={@menu_shown == :campus_life} toggle_event="toggle_filter_menu" phx_value_menu="campus_life">
          <.live_component module={LevelWeb.CollegesNewLive.Filters.CampusLifeFilter} id="college_campus_life_filter" slug="filters-bar" college_filter={@college_filter} embedded?={false} />
        </.dropdown_menu>

        <.dropdown_menu button_text="Tuition" id="college-tuition-filter" show?={@menu_shown == :tuition} toggle_event="toggle_filter_menu" phx_value_menu="tuition">
          <.live_component module={LevelWeb.CollegesNewLive.Filters.TuitionFilter} id="college_tuition_filter" slug="filters-bar" college_filter={@college_filter} embedded?={false} />
        </.dropdown_menu>
      </div>
    </div>
    """
  end