Add pagination feature for blog post

Signed-off-by: Al Asad Nur Riyad <alasadnurriyad@Als-MacBook-Pro.local>

pages/blogs/index.vue

@@ -1,6 +1,9 @@
 <script lang="ts" setup>
 const { data } = await useAsyncData('home', () => queryContent('/blogs').sort({ _id: -1 }).find())
 
+const elementPerPgae = ref(4)
+const pageNumber = ref(1)
+
 const formatedData = computed(() => {
   return data.value?.map((articles) => {
     return {
@@ -14,9 +17,36 @@ const formatedData = computed(() => {
       tags: articles.tags || [],
       published: articles.published || false,
     }
-  })
+  }) || []
 })
 
+const paginatedData = computed(() => {
+  return formatedData.value.filter((data, idx) => {
+    const startInd = ((pageNumber.value - 1) * elementPerPgae.value)
+    const endInd = (pageNumber.value * elementPerPgae.value) - 1
+
+    if (idx >= startInd && idx <= endInd)
+      return true
+    else return false
+  }) || []
+})
+
+function onPreviousPageClick() {
+  if (pageNumber.value > 1)
+    pageNumber.value -= 1
+}
+
+const isNextpageAvailable = computed(() => {
+  if (pageNumber.value * elementPerPgae.value <= formatedData.value.length)
+    return true
+  else return false
+})
+
+function onNextPageClick() {
+  if (isNextpageAvailable.value)
+    pageNumber.value += 1
+}
+
 useHead({
   title: 'Archive',
   meta: [
@@ -32,20 +62,38 @@ useHead({
 <template>
   <main class="container max-w-5xl mx-auto text-zinc-600">
     <ArchiveHero />
-    <div class="space-y-5 my-5">
-      <template v-for="post in formatedData" :key="post.title">
-        <ArchiveCard
-          :path="post.path"
-          :title="post.title"
-          :date="post.date"
-          :description="post.description"
-          :image="post.image"
-          :alt="post.alt"
-          :og-image="post.ogImage"
-          :tags="post.tags"
-          :published="post.published"
-        />
+    <ClientOnly>
+      <div v-auto-animate class="space-y-5 my-5">
+        <template v-for="post in paginatedData" :key="post.title">
+          <ArchiveCard
+            :path="post.path"
+            :title="post.title"
+            :date="post.date"
+            :description="post.description"
+            :image="post.image"
+            :alt="post.alt"
+            :og-image="post.ogImage"
+            :tags="post.tags"
+            :published="post.published"
+          />
+        </template>
+      </div>
+
+      <template #fallback>
+        <!-- this will be rendered on server side -->
+        <BlogLoader />
+        <BlogLoader />
       </template>
+    </ClientOnly>
+
+    <div class="flex justify-center items-center space-x-6">
+      <button :disabled="pageNumber <= 1" @click="onPreviousPageClick">
+        <Icon name="mdi:code-less-than" size="30" :class="{ 'text-sky-700': pageNumber > 1 }" />
+      </button>
+      <p>{{ pageNumber }}</p>
+      <button :disabled="!isNextpageAvailable" @click="onNextPageClick">
+        <Icon name="mdi:code-greater-than" size="30" :class="{ 'text-sky-700': isNextpageAvailable }" />
+      </button>
     </div>
   </main>
 </template>