feat: create pagination component

Rule-34 · May 21, 2023 · ecbc7a7 · ecbc7a7
1 parent c8bca78
commit ecbc7a7
Showing 1 changed file with 22 additions and 0 deletions.
diff --git a/components/pages/posts/navigation/PostsPagination.vue b/components/pages/posts/navigation/PostsPagination.vue
@@ -0,0 +1,22 @@
+<script setup>
+  import { vIntersectionObserver } from '@vueuse/components'
+
+  const emit = defineEmits(['loadNextPage'])
+
+  function onIntersectionObserver([{ isIntersecting }]) {
+    if (!isIntersecting) {
+      return
+    }
+
+    emit('loadNextPage')
+  }
+</script>
+
+<template>
+  <div
+    v-intersection-observer="[onIntersectionObserver, { rootMargin: '650px' }]"
+    class="flex animate-pulse items-center justify-center rounded-md px-4 py-2 text-sm font-medium text-base-content ring-1 ring-base-0/20"
+  >
+    Loading next page&hellip;
+  </div>
+</template>