VelvetKit

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div class="@container w-full">
  <div class="flex w-full flex-col items-center gap-2 @lg:flex-row @lg:justify-between">
    <p class="text-sm text-muted-foreground whitespace-nowrap">Showing 1–25 of 240</p>
    <nav aria-label="Pages" class="mx-auto flex w-full justify-center">
      <ul class="flex flex-row flex-wrap items-center justify-center gap-1">
        <li>
          <span class="inline-flex items-center gap-1 px-2.5 py-2 text-sm text-muted-foreground opacity-50"><i data-lucide="chevron-left" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i>
            <span class="hidden @md:inline">Previous</span></span>
        </li>
        <li>
          <a aria-current="page" href="?page=1" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background text-primary underline-offset-4 hover:underline px-4 py-2 size-9 border border-input bg-background">1</a>
        </li>
        <li>
          <a href="?page=2" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background text-primary underline-offset-4 hover:underline px-4 py-2 size-9">2</a>
        </li>
        <li>
          <a href="?page=3" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background text-primary underline-offset-4 hover:underline px-4 py-2 size-9">3</a>
        </li>
        <li>
          <span class="flex size-9 items-center justify-center text-muted-foreground" aria-hidden="true">…<span class="sr-only">More pages</span></span>
        </li>
        <li>
          <a href="?page=10" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background text-primary underline-offset-4 hover:underline px-4 py-2 size-9">10</a>
        </li>
        <li>
          <a aria-label="Go to next page" href="?page=2" class="inline-flex items-center justify-center whitespace-nowrap rounded-sm text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background text-primary underline-offset-4 hover:underline h-9 py-2 gap-1 px-2.5"><span class="hidden @md:inline">Next</span><i data-lucide="chevron-right" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i>
          </a>
        </li>
      </ul>
    </nav></div>
</div>
1
2
render(UI::Pagination.new(pagy: Pagy::Offset.new(count: count.to_i, page: page.to_i,
                                                 limit: limit.to_i)))

No notes provided.

Param Description Input

—

—

—