My approach to pagy paginator using view component in Rails 7

rails_7_pagy_view_component.md

View Component for Pagy Paginator

rails g compoent pagy_paginator

pagy_paginator_component.rb

# frozen_string_literal: true

class PagyPaginatorComponent < ApplicationComponent
  include PagyHelper

  attr_reader :id, :pagy, :container_classes, :view_component

  def initialize(id:, pagy:,  container_classes: nil, options: {})
    @id = id
    @pagy = pagy
    @container_classes = container_classes
  end
end

pagy_paginator_component.html.erb

<%= tag.div id: id, class: container_classes do %>
  <%= content %>
<% end %>
<%= pagy_links do %>
  <%== pagy_nav pagy %>
<% end %>

tailwind css

add to application.tailwind.css the following

.pagy-nav {
  @apply flex space-x-2 my-8 justify-center;
}

.pagy-nav .page a,
.pagy-nav .page.active,
.pagy-nav .page.prev.disabled,
.pagy-nav .page.next.disabled {
  @apply block rounded-lg px-3 py-1 text-sm text-gray-500 font-semibold bg-gray-200;
  &:hover{
    @apply bg-gray-300;
  }
  &:active{
    @apply bg-gray-400 text-white;
  }
}

.pagy-nav .page.prev.disabled,
.pagy-nav .page.next.disabled {
  @apply text-gray-400 cursor-default;
  &:hover {
    @apply text-gray-400 bg-gray-200;
  }
  &:active {
    @apply text-gray-400 bg-gray-200;
  }
}

.pagy-nav .page.active {
  @apply text-white cursor-default bg-gray-400;
  &:hover {
    @apply text-white bg-gray-400;
  }
  &:active {
    @apply bg-gray-400 text-white;
  }
}

.pagy-combo-input {
  @apply bg-white px-2 rounded-sm
}