Pagination with page info, numbered pages, ellipsis, and per-page select

<script setup lang="ts">
import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"
import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination"
</script>

<template>
  <Pagination>
    <PaginationContent class="w-full justify-between">
      <PaginationItem>
        <span class="text-muted-foreground text-sm">
          Page <span class="text-foreground font-medium">1</span> of <span class="text-foreground font-medium">10</span>
        </span>
      </PaginationItem>
      <PaginationItem class="flex items-center gap-1">
        <PaginationPrevious href="#" />
        <PaginationLink href="#" :is-active="true">1</PaginationLink>
        <PaginationLink href="#">2</PaginationLink>
        <PaginationLink href="#">3</PaginationLink>
        <PaginationLink href="#">4</PaginationLink>
        <PaginationEllipsis />
        <PaginationNext href="#" />
      </PaginationItem>
      <PaginationItem>
        <NativeSelect class="w-28">
          <NativeSelectOption value="10">10 / page</NativeSelectOption>
          <NativeSelectOption value="20">20 / page</NativeSelectOption>
          <NativeSelectOption value="50">50 / page</NativeSelectOption>
          <NativeSelectOption value="100">100 / page</NativeSelectOption>
        </NativeSelect>
      </PaginationItem>
    </PaginationContent>
  </Pagination>
</template>