Pagination Bar ​

<script setup lang="ts">
import { ref } from 'vue';
import { PaginationBar } from '@youcan/ui-vue3';

const TOTAL = 50;
const PER_PAGE = 5;
const TOTAL_PAGES = Math.ceil(TOTAL / PER_PAGE);

const currentPage = ref(1);

function handlePaginationNavigation(pageNumber: number) {
  currentPage.value = pageNumber;
}
</script>

<template>
  <PaginationBar
    :current="currentPage"
    :size="TOTAL_PAGES"
    :count="PER_PAGE"
    :total="TOTAL"
    @update:current="handlePaginationNavigation"
  />
</template>