updt: frontend - home

pagination button position fixed
rkshaon · Sep 12, 2024 · 0c4bd8f · 0c4bd8f
1 parent e257a4f
commit 0c4bd8f
Showing 1 changed file with 24 additions and 8 deletions.
diff --git a/frontend/src/pages/HomePage.vue b/frontend/src/pages/HomePage.vue
@@ -6,18 +6,34 @@
         Explore a vast collection of books, share your reviews, and connect with other book lovers.
       </p>
     </div>
+    <div class="flex justify-between mt-8 mb-8">
+      <div v-if="previousPage" class="flex-1">
+        <button @click="fetchBooks(previousPage)" class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
+          Previous
+        </button>
+      </div>
+      <div class="flex-1"></div>
+      <div v-if="nextPage" class="flex-1 text-right">
+        <button @click="fetchBooks(nextPage)" class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
+          Next
+        </button>
+      </div>
+    </div>
     <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
       <BookCardComponent v-for="(book, index) in books" :key="index" :book="book" />
     </div>
     <div class="flex justify-between mt-8">
-      <button v-if="previousPage" @click="fetchBooks(previousPage)"
-        class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
-        Previous
-      </button>
-      <button v-if="nextPage" @click="fetchBooks(nextPage)"
-        class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
-        Next
-      </button>
+      <div v-if="previousPage" class="flex-1">
+        <button @click="fetchBooks(previousPage)" class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
+          Previous
+        </button>
+      </div>
+      <div class="flex-1"></div>
+      <div v-if="nextPage" class="flex-1 text-right">
+        <button @click="fetchBooks(nextPage)" class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
+          Next
+        </button>
+      </div>
     </div>
   </main>
 </template>