# Pagination

Pagination with page navigation, next and previous links.

- Install: `php artisan blatui:add pagination`
- Source: https://blatui.remix-it.com/r/pagination.json
- Composer: `composer require mallardduck/blade-lucide-icons gehrisandro/tailwind-merge-laravel`

## resources/views/components/ui/pagination.blade.php

```blade
<nav
    role="navigation"
    aria-label="pagination"
    data-slot="pagination"
    {{ $attributes->twMerge('mx-auto flex w-full justify-center') }}
>
    {{ $slot }}
</nav>
```

## resources/views/components/ui/pagination-content.blade.php

```blade
<ul data-slot="pagination-content" {{ $attributes->twMerge('flex flex-row items-center gap-1') }}>
    {{ $slot }}
</ul>
```

## resources/views/components/ui/pagination-ellipsis.blade.php

```blade
<span
    aria-hidden="true"
    data-slot="pagination-ellipsis"
    {{ $attributes->twMerge('flex size-9 items-center justify-center') }}
>
    <x-lucide-more-horizontal class="size-4" />
    <span class="sr-only">More pages</span>
</span>
```

## resources/views/components/ui/pagination-item.blade.php

```blade
<li data-slot="pagination-item" {{ $attributes }}>
    {{ $slot }}
</li>
```

## resources/views/components/ui/pagination-link.blade.php

```blade
@props([
    'href' => '#',
    'isActive' => false,
    'size' => 'icon',
])

@php
    $base = "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]";
    $variant = $isActive
        ? 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50'
        : 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50';
    $sizes = [
        'default' => 'h-9 px-4 py-2 has-[>svg]:px-3',
        'sm' => 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
        'lg' => 'h-10 rounded-md px-6 has-[>svg]:px-4',
        'icon' => 'size-9',
    ];
    $classes = $base.' '.$variant.' '.($sizes[$size] ?? $sizes['icon']);
@endphp

<a
    href="{{ $href }}"
    data-slot="pagination-link"
    @if ($isActive) aria-current="page" data-active="true" @endif
    {{ $attributes->twMerge($classes) }}
>{{ $slot }}</a>
```

## resources/views/components/ui/pagination-next.blade.php

```blade
@props(['href' => '#'])

<x-ui.pagination-link
    :href="$href"
    size="default"
    aria-label="Go to next page"
    {{ $attributes->twMerge('gap-1 px-2.5 sm:pr-2.5') }}
>
    <span class="hidden sm:block">Next</span>
    <x-lucide-chevron-right />
</x-ui.pagination-link>
```

## resources/views/components/ui/pagination-previous.blade.php

```blade
@props(['href' => '#'])

<x-ui.pagination-link
    :href="$href"
    size="default"
    aria-label="Go to previous page"
    {{ $attributes->twMerge('gap-1 px-2.5 sm:pl-2.5') }}
>
    <x-lucide-chevron-left />
    <span class="hidden sm:block">Previous</span>
</x-ui.pagination-link>
```