admin/property-pulse-nextjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pagination component

Browse Source
This commit is contained in:
Brad Traversy
2024-07-15 12:36:36 -04:00
parent 3b9309e64c
commit fada26f8a3
3 changed files with 46 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_theme_files/properties.html
+8 -40
View File
@@ -616,48 +616,16 @@
</section>
<!-- Pagination -->
<section class="container mx-auto flex justify-center my-8">
<nav
class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
aria-label="Pagination"
>
<!-- Previous Button -->
<a
href="#"
class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
>
<span class="sr-only">Previous</span>
<!-- You can use an icon here, for example: <i class="fas fa-chevron-left"></i> -->
Previous
</a>
<section class="container mx-auto flex justify-center items-center my-8">
<a class="mr-2 px-2 py-1 border border-gray-300 rounded" href="#">
Previous
</a>
<!-- Page Numbers -->
<a
href="#"
class="bg-blue-500 text-white hover:bg-blue-600 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium"
>1</a
>
<a
href="#"
class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
>2</a
>
<a
href="#"
class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
>3</a
>
<span class="mx-2">Page 1 of 4</span>
<!-- Next Button -->
<a
href="#"
class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
>
<span class="sr-only">Next</span>
<!-- You can use an icon here, for example: <i class="fas fa-chevron-right"></i> -->
Next
</a>
</nav>
<a class="ml-2 px-2 py-1 border border-gray-300 rounded" href="#">
Next
</a>
</section>
<!-- Footer -->