Pagination

<twig:Pagination>
    <twig:Pagination:Content>
        <twig:Pagination:Item>
            <twig:Pagination:Previous href="#" />
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#">1</twig:Pagination:Link>
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#" active>2</twig:Pagination:Link>
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#">3</twig:Pagination:Link>
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Next href="#" />
        </twig:Pagination:Item>
    </twig:Pagination:Content>
</twig:Pagination>

php bin/console ux:install pagination --kit flowbite-4

composer require symfony/ux-icons twig/html-extra:^3.24.0 symfony/ux-twig-component:^3.5 tales-from-a-dev/twig-tailwind-extra:^1.3.0

npm install flowbite
# ...or with Symfony AssetMapper
php bin/console importmap:require flowbite

{# @block content The pagination structure, typically a `Pagination:Content`. #}
<nav
    role="navigation"
    {{ attributes.defaults({
        class: 'flex items-center space-x-4'|tailwind_classes,
    }) }}
>
    {%- block content %}{% endblock -%}
</nav>

{# @block content The pagination items, typically multiple `Pagination:Item` components. #}
<ul
    {{ attributes.defaults({
        class: 'flex -space-x-px text-sm rounded-base [&_a]:h-10 [&_*]:rounded-none [&>*:first-child]:[&_*]:rounded-s-base [&>*:last-child]:[&_*]:rounded-e-base'|tailwind_classes,
    }) }}
>
    {%- block content %}{% endblock -%}
</ul>

{# @block content The pagination item content, typically a `Pagination:Link`. #}
<li{{ attributes }}>
    {%- block content %}{% endblock -%}
</li>

{# @prop active boolean Whether this is the current page. #}
{# @block content The page number or navigation icon. #}
{%- props active = false -%}
<twig:Button
    as="a"
    variant="secondary"
    shape="rounded"
    size="icon"
    aria-current="{{ active ? 'page' : 'false' }}"
    href="#"
    class="{{ active ? 'text-fg-brand bg-neutral-tertiary-medium' : '' }}"
    {{ ...attributes.without('class') }}
>
    {{- block(outerBlocks.content) -}}
</twig:Button>

{# @prop asIcon boolean Whether to render only the chevron icon instead of the text label. #}
{% props asIcon = false %}

<twig:Pagination:Link
    aria-label="Go to next page"
    size="{{ asIcon ? 'icon' : 'default' }}"
    {{ ...attributes }}
>
    {% if asIcon %}
        <twig:ux:icon name="flowbite:chevron-right-outline" class="size-4" />
    {% else %}
        <span>Next</span>
    {% endif %}
</twig:Pagination:Link>

{# @prop asIcon boolean Whether to render only the chevron icon instead of the text label. #}
{% props asIcon = false %}

<twig:Pagination:Link
    aria-label="Go to previous page"
    size="{{ asIcon ? 'icon' : 'default' }}"
    {{ ...attributes }}
>
    {% if asIcon %}
        <twig:ux:icon name="flowbite:chevron-left-outline" class="size-4" />
    {% else %}
        <span>Previous</span>
    {% endif %}
</twig:Pagination:Link>

<twig:Pagination>
    <twig:Pagination:Content>
        <twig:Pagination:Item>
            <twig:Pagination:Previous asIcon href="#" />
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#">1</twig:Pagination:Link>
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#" active>2</twig:Pagination:Link>
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#">3</twig:Pagination:Link>
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Next asIcon href="#" />
        </twig:Pagination:Item>
    </twig:Pagination:Content>
</twig:Pagination>