Pagination with page info on left

<script setup lang="ts">
import { Pagination, PaginationContent, PaginationItem, PaginationNext, PaginationPrevious } from "@/components/ui/pagination"
</script>

<template>
  <Pagination class="w-full max-w-xs">
    <PaginationContent class="w-full justify-between">
      <PaginationItem>
        <span class="text-muted-foreground text-xs">
          Page <span class="text-foreground font-medium">1</span> of <span class="text-foreground font-medium">10</span>
        </span>
      </PaginationItem>
      <PaginationItem class="flex gap-1">
        <PaginationPrevious href="#" />
        <PaginationNext href="#" />
      </PaginationItem>
    </PaginationContent>
  </Pagination>
</template>