Componentize the pagination bar

src/components/ImageList.vue

 <template>
   <section class="w-full">
+    <PaginationBar
+      :current-page="currentPage"
+      :last-page="lastPage"
+      @onPageChange="pageChange"
+    />
     <div class="w-full flex flex-row flex-wrap relative">
       <div
         v-for="(hash, index) in stateHashArray"
@@ -9,16 +14,11 @@
         <ImageItem :hash="hash" @checked="appendToDeleteArray"></ImageItem>
       </div>
     </div>
-    <div class="mx-auto max-w-max">
-      <button
-        v-for="(page, index) in pages"
-        :key="index"
-        class="mr-2"
-        @click="updatePage(page)"
-      >
-        {{ page }}
-      </button>
-    </div>
+    <PaginationBar
+      :current-page="currentPage"
+      :last-page="lastPage"
+      @onPageChange="pageChange"
+    />
     <button
       v-show="deleteArray.length"
       @click="deleteImages(deleteArray)"
@@ -31,10 +31,13 @@
 
 <script>
 import ImageItem from "@/components/ImageItem.vue";
+import PaginationBar from "@/components/PaginationBar.vue";
 import { mapState, mapActions } from "vuex";
+
 export default {
   components: {
     ImageItem,
+    PaginationBar,
   },
   data: () => {
     return {
@@ -44,26 +47,14 @@ export default {
     };
   },
   computed: {
-    // TODO: Rewrite this less confusingly if possible.
-    pages: function () {
-      return [
-        this.currentPage - 1 > 1 ? 1 : null,
-        this.currentPage - 1 > 2 ? "..." : null,
-        this.currentPage !== 1 ? this.currentPage - 1 : null,
-        this.currentPage,
-        this.currentPage !== this.lastPage ? this.currentPage + 1 : null,
-        this.lastPage - this.currentPage > 2 ? "..." : null,
-        this.lastPage - this.currentPage > 1 ? this.lastPage : null,
-      ].filter((element) => element !== null);
-    },
     ...mapState(["stateUser", "stateHashArray"]),
   },
   async created() {
-    this.updatePage(this.currentPage);
+    this.pageChange(this.currentPage);
     this.lastPage = Number(await this.getTotalPages());
   },
   methods: {
-    async updatePage(pageNumber) {
+    async pageChange(pageNumber) {
       if (pageNumber === "...") {
         let pageNumber = Number(prompt("Jump to page"));
         if (

src/components/PaginationBar.vue

+<template>
+  <div class="mx-auto max-w-max">
+    <button
+      v-for="(page, index) in pages"
+      :key="index"
+      class="mr-2 last:mr-0"
+      @click="$emit('onPageChange', page)"
+    >
+      {{ page }}
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    currentPage: {
+      type: Number,
+      required: true,
+    },
+    lastPage: {
+      type: Number,
+      required: true,
+    },
+  },
+  computed: {
+    // TODO: Rewrite this less confusingly if possible.
+    // This returns an array that represents the pagination bar
+    // Demonstration:
+    // 1 ... 3 [4] 5 ... 12 (4 is the selected page)
+    // [1] 2 ... 12
+    // 1 2 [3] 4 ... 12
+    // The bar always shows the first and last pages, the selected page and 2 pages 
+    // that are offset by 1 to the selected page
+    pages: function () {
+      return [
+        this.currentPage - 1 > 1 ? 1 : null,
+        this.currentPage - 1 > 2 ? "..." : null,
+        this.currentPage !== 1 ? this.currentPage - 1 : null,
+        this.currentPage,
+        this.currentPage !== this.lastPage ? this.currentPage + 1 : null,
+        this.lastPage - this.currentPage > 2 ? "..." : null,
+        this.lastPage - this.currentPage > 1 ? this.lastPage : null,
+      ].filter((element) => element !== null);
+    },
+  },
+};
+</script>
\ No newline at end of file

tailwind.config.js

@@ -10,6 +10,7 @@ module.exports = {
   variants: {
     extend: {
       opacity: ['disabled'],
+      margin: ['last'],
     },
   },
   plugins: [],