Create pagination component

1 files changed, 49 insertions, 0 deletions

diff --git a/src/styles/globals.css b/src/styles/globals.css
index d0080dda..6a5f86a8 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -266,4 +266,53 @@ html, body {
 
 .swiper-pagination-bullet-active {
     @apply !bg-yellow-900;
+}
+
+.pagination {
+    @apply
+        flex
+        justify-center
+        gap-x-1
+    ;
+}
+
+.pagination-item {
+    @apply 
+        p-1
+        flex
+        justify-center
+        items-center
+        w-10
+        rounded 
+        ease-linear 
+        duration-150 
+        border
+        border-gray-300
+        bg-gray-100 
+        hover:bg-gray-300 
+        text-gray-800
+    ;
+}
+
+.pagination-item--active {
+    @apply 
+        border-yellow-900
+        bg-yellow-900
+        hover:bg-yellow-900
+        text-gray-900
+    ;
+}
+
+.pagination-dots {
+    @apply
+        p-1
+        flex
+        justify-center
+        items-end
+        w-10
+        rounded 
+        ease-linear 
+        bg-gray-100
+        text-sm
+    ;
 }
\ No newline at end of file