move pagination page count inside BasePagination

Author: Gareth Redfern

src/components/BasePagination.vue

@@ -1,46 +1,51 @@
 <template>
-  <div aria-label="Pagination" class="flex justify-center">
-    <button
-      rel="first"
-      type="button"
-      @click="firstPage"
-      v-if="links.prev"
-      class="px-4 py-2 m-1 text-sm text-pink-400 border rounded hover:text-pink-500"
-    >
-      First
-    </button>
+  <div aria-label="Pagination" class="flex items-center justify-between py-4">
+    <p class="text-sm text-gray-500">
+      Page {{ meta.current_page }} of {{ meta.last_page }}
+    </p>
+    <div class="flex">
+      <button
+        rel="first"
+        type="button"
+        @click="firstPage"
+        v-if="links.prev"
+        class="px-4 py-2 m-1 text-sm text-pink-400 border rounded hover:text-pink-500"
+      >
+        First
+      </button>
 
-    <button
-      rel="prev"
-      type="button"
-      @click="prevPage"
-      :class="{ 'rounded-r': !links.next }"
-      v-if="links.prev"
-      class="px-4 py-2 m-1 text-sm text-pink-400 border rounded hover:text-pink-500"
-    >
-      Previous
-    </button>
+      <button
+        rel="prev"
+        type="button"
+        @click="prevPage"
+        :class="{ 'rounded-r': !links.next }"
+        v-if="links.prev"
+        class="px-4 py-2 m-1 text-sm text-pink-400 border rounded hover:text-pink-500"
+      >
+        Previous
+      </button>
 
-    <button
-      rel="next"
-      type="button"
-      @click="nextPage"
-      :class="{ 'rounded-l': !links.prev }"
-      v-if="links.next"
-      class="px-4 py-2 m-1 text-sm text-pink-400 border rounded hover:text-pink-500"
-    >
-      Next
-    </button>
+      <button
+        rel="next"
+        type="button"
+        @click="nextPage"
+        :class="{ 'rounded-l': !links.prev }"
+        v-if="links.next"
+        class="px-4 py-2 m-1 text-sm text-pink-400 border rounded hover:text-pink-500"
+      >
+        Next
+      </button>
 
-    <button
-      rel="last"
-      type="button"
-      @click="lastPage"
-      v-if="links.next"
-      class="px-4 py-2 m-1 text-sm text-pink-400 border rounded hover:text-pink-500"
-    >
-      Last
-    </button>
+      <button
+        rel="last"
+        type="button"
+        @click="lastPage"
+        v-if="links.next"
+        class="px-4 py-2 m-1 text-sm text-pink-400 border rounded hover:text-pink-500"
+      >
+        Last
+      </button>
+    </div>
   </div>
 </template>
 

src/views/Users.vue

@@ -36,20 +36,13 @@
       <FlashMessage :error="error" v-if="error" key="error" />
     </transition>
     <transition name="fade">
-      <div
-        class="flex items-center justify-between py-4"
+      <BasePagination
+        path="users"
+        :meta="meta"
+        :links="links"
+        action="user/paginateUsers"
         v-if="meta && meta.last_page > 1"
-      >
-        <p class="text-sm text-gray-500">
-          Page {{ meta.current_page }} of {{ meta.last_page }}
-        </p>
-        <BasePagination
-          path="users"
-          :meta="meta"
-          :links="links"
-          action="user/paginateUsers"
-        />
-      </div>
+      />
     </transition>
   </div>
 </template>