index.html.erb

<%= open_graph_tags title: @meta.title, turbo_native_title: t(".title"), description: @meta.description %>

<div data-controller="toggle" data-toggle-visibility-class="hidden" class="max-w-7xl bg-white mx-auto lg:mt-16 mb-16 overflow-auto sm:rounded-md sm:shadow">
  <div class="pt-12 px-4 sm:px-6 mb-4">
    <div class="md:flex md:space-x-8 justify-between items-center">
      <% unless turbo_native_app? %>
        <h1 class="text-3xl font-extrabold tracking-tight text-gray-900"><%= @meta.title %></h1>
      <% end %>
      <%= render Developers::ProfileActionComponent.new(current_user) %>
    </div>

    <!-- Sort and mobile filter button -->
    <div class="md:flex justify-between items-center">
      <p class="mt-4 pb-4 max-w-xl text-sm text-gray-700"><%= @meta.description %></p>

      <div class="hidden md:block">
        <%= render Developers::QuerySortButtonComponent.new(query: @query, user: current_user, form_id: "developer-filters-desktop") %>
      </div>

      <div class="flex justify-end items-center md:hidden">
        <%= render Developers::QuerySortButtonComponent.new(query: @query, user: current_user, form_id: "developer-filters-mobile", scope: "developer-filters-mobile") %>
        <button type="button" data-action="toggle#toggle" class="p-2 -m-2 ml-4 sm:ml-6 text-gray-400 hover:text-gray-500" aria-expanded="false">
          <%= inline_svg_tag "icons/solid/filter.svg", class: "h-5 w-5", aria_hidden: true %>
          <span class="sr-only"><%= t("developers.query_component.filters") %></span>
        </button>
      </div>
    </div>
  </div>

  <hr>

  <div class="grid grid-cols-12">
    <!-- Desktop and mobile filters -->
    <div class="col-span-12 md:col-span-3 sm:pt-4">
      <div class="hidden md:block">
        <%= render Developers::QueryComponent.new(query: @query, user: current_user, form_id: "developer-filters-desktop") %>
      </div>

      <div class="md:hidden">
        <%= render Developers::QueryMobileComponent.new(query: @query, user: current_user, form_id: "developer-filters-mobile") %>
      </div>
    </div>

    <!-- Paginated list of developers -->
    <div class="col-span-12 md:col-span-9 border-l">
      <% if @query.sort == :recommended %>
        <%= render "recommended_sort_banner", form_id: "developer-filters-desktop" %>
      <% end %>

      <%= render Developers::CountComponent.new(count: @query.pagy.count, total: @developers_count) %>

      <% if @query.records.any? %>
        <%= render Developers::CardComponent.with_collection(@query.featured_records, highlight_featured: true) %>

        <% if @paywall_results %>
          <%= render Developers::CardComponent.with_collection(@query.records) %>
          <div class="relative">
             <%= render Developers::CardComponent.with_collection(Developers::PaywalledSearchResults.random_developers) %>
             <%= render SubscriptionCTAComponent.new(user: current_user) %>
           </div>
        <% else %>
          <%= render PagyPaginatorComponent.new(id: "developers", pagy: @query.pagy, url_array: [:developers], container_classes: "divide-y divide-gray-200", options: @query.filters) do |component| %>
            <% component.loading_icon do %>
              <div class="py-4">
                <%= render LoadingComponent.new %>
              </div>
            <% end %>
            <%= render Developers::CardComponent.with_collection(@query.records) %>
          <% end %>
        <% end %>
      <% else %>
        <%= render EmptyStateComponent.new(t(".empty_state.title"), "user_group", body: t(".empty_state.body")) %>
      <% end %>
    </div>
  </div>
</div>