Add pagination in /news page

components/pagination-item.vue

@@ -0,0 +1,49 @@
+<template>
+  <div
+    v-if="ttlPage > 1"
+    class="flex p-5 justify-center"
+  >
+    <div class="join">
+      <button
+        v-for="page in pageNumbers"
+        :key="page"
+        :class="{ 'btn-primary': page === currentPage, 'btn-disabled': page === '...' }"
+        class="join-item btn no-animation"
+        @click="handlePageChange(page)"
+      >
+        {{ page }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<{ totalItem?: number, itemPerPage?: number }>(), {
+  totalItem: 1,
+  itemPerPage: 1,
+})
+
+const currentPage = defineModel({ type: Number, default: 1 })
+const ttlPage = computed(() => Math.ceil(props.totalItem / props.itemPerPage))
+
+const pageNumbers = computed(() => {
+  if (ttlPage.value > 5) {
+    if (currentPage.value < 3) {
+      return [1, 2, 3, '...', ttlPage.value]
+    }
+    else if (currentPage.value + 1 >= ttlPage.value) {
+      return [1, '...', ttlPage.value - 2, ttlPage.value - 1, ttlPage.value]
+    }
+    return [1, '...', currentPage.value - 1, currentPage.value, currentPage.value + 1, '...', ttlPage.value]
+  }
+  else {
+    return Array.from({ length: ttlPage.value }, (_, i) => i + 1)
+  }
+})
+
+const handlePageChange = (page: number | string) => {
+  if (typeof page === 'number') {
+    currentPage.value = page
+  }
+}
+</script>

pages/news/index.vue

@@ -11,7 +11,7 @@
 
     <div class="mx-auto max-w-[400px] md:max-w-[820px] xl:max-w-max font-[sans-serif] grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
       <NuxtLink
-        v-for="item of data"
+        v-for="item of paginatedData"
         :key="item.id"
         :href="item._path!"
         class="flex flex-col rounded overflow-hidden border dark:border-gray-700 transform hover:scale-[1.02] transition-transform duration-300"
@@ -37,6 +37,12 @@
         </div>
       </NuxtLink>
     </div>
+
+    <PaginationItem
+      v-model="currentPage"
+      :total-item="data?.length"
+      :item-per-page="itemPerPage"
+    />
   </section>
 </template>
 
@@ -60,4 +66,12 @@ const { data } = await useAsyncData('news-items-list', () =>
     .sort({ date: -1 })
     .find(),
 )
+
+const currentPage = ref(1)
+const itemPerPage = 9
+
+const paginatedData = computed(() => {
+  const startIndex = itemPerPage * (currentPage.value - 1)
+  return data.value?.slice(startIndex, startIndex + itemPerPage)
+})
 </script>