rails g compoent pagy_paginator
# 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
<%= tag.div id: id, class: container_classes do %>
<%= content %>
<% end %>
<%= pagy_links do %>
<%== pagy_nav pagy %>
<% end %>
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
}