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:Ellipsis />
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Next href="#" />
        </twig:Pagination:Item>
    </twig:Pagination:Content>
</twig:Pagination>

composer require symfony/ux-icons tales-from-a-dev/twig-tailwind-extra:^1.0.0

{# @block content The default block #}
<nav
    class="{{ 'mx-auto flex w-full justify-center ' ~ attributes.render('class')|tailwind_merge }}"
    role="navigation"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</nav>

{# @block content The default block #}
<ul {{ attributes.without('class') }}
    class="{{ 'flex flex-row items-center gap-1 ' ~ attributes.render('class')|tailwind_merge }}"
>
    {%- block content %}{% endblock -%}
</ul>

<span
    aria-hidden="true"
    class="{{ 'flex size-9 items-center justify-center ' ~ attributes.render('class')|tailwind_merge }}"
    {{ attributes.without('class') }}
>
    <twig:ux:icon name="lucide:more-horizontal" class="size-4" />
    <span class="sr-only">More pages</span>
</span>

{# @block content The default block #}
<li{{ attributes }}>
    {%- block content %}{% endblock -%}
</li>

{# @prop active boolean Whether the link is active or not, default to `false` #}
{# @block content The default block #}
{%- props active = false -%}
<twig:Button
    as="a"
    variant="{{ active ? 'outline' : 'ghost' }}"
    size="icon"
    aria-current="{{ active ? 'page' : false }}"
    href="#"
    {{ ...attributes.without('class') }}
>
    {{- block(outerBlocks.content) -}}
</twig:Button>

<twig:Pagination:Link
    aria-label="Go to next page"
    size="default"
    class="{{ 'gap-1 pr-2.5 ' ~ attributes.render('class')|tailwind_merge }}"
    {{ ...attributes.without('class') }}
>
    <span>Next</span>
    <twig:ux:icon name="lucide:chevron-right" class="size-4" />
</twig:Pagination:Link>

<twig:Pagination:Link
    aria-label="Go to previous page"
    size="default"
    class="{{ 'gap-1 pl-2.5 ' ~ attributes.render('class')|tailwind_merge }}"
    {{ ...attributes.without('class') }}
>
    <twig:ux:icon name="lucide:chevron-left" class="size-4" />
    <span>Previous</span>
</twig:Pagination:Link>