UI

Author: pascalbaljet

js/Pagination.vue

@@ -1,16 +1,7 @@
 <template>
   <nav
     v-if="hasPagination"
-    class="
-            bg-white
-            px-4
-            py-3
-            flex
-            items-center
-            justify-between
-            border-t border-gray-200
-            sm:px-6
-        "
+    class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"
   >
     <p v-if="!hasData || pagination.total < 1">
       {{ translations.no_results_found }}
@@ -24,49 +15,26 @@
     >
       <component
         :is="previousPageUrl ? 'a' : 'div'"
-        :class="{'cursor-not-allowed': !previousPageUrl}"
+        :class="{
+          'cursor-not-allowed text-gray-400': !previousPageUrl,
+          'text-gray-700 hover:text-gray-500': previousPageUrl
+        }"
         :href="previousPageUrl"
         :dusk="previousPageUrl ? 'pagination-simple-previous' : null"
-        class="
-                    relative
-                    inline-flex
-                    items-center
-                    px-4
-                    py-2
-                    border border-gray-300
-                    text-sm
-                    font-medium
-                    rounded-md
-                    text-gray-700
-                    bg-white
-                    hover:text-gray-500
-                "
-
+        class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md bg-white"
         @click.prevent="onClick(previousPageUrl)"
       >
         {{ translations.previous }}
       </component>
       <component
         :is="nextPageUrl ? 'a' : 'div'"
-        :class="{'cursor-not-allowed': !nextPageUrl}"
+        :class="{
+          'cursor-not-allowed text-gray-400': !nextPageUrl,
+          'text-gray-700 hover:text-gray-500': nextPageUrl
+        }"
         :href="nextPageUrl"
         :dusk="nextPageUrl ? 'pagination-simple-next' : null"
-        class="
-                    ml-3
-                    relative
-                    inline-flex
-                    items-center
-                    px-4
-                    py-2
-                    border border-gray-300
-                    text-sm
-                    font-medium
-                    rounded-md
-                    text-gray-700
-                    bg-white
-                    hover:text-gray-500
-                "
-
+        class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md bg-white"
         @click.prevent="onClick(nextPageUrl)"
       >
         {{ translations.next }}
@@ -90,37 +58,18 @@
       </div>
       <div>
         <nav
-          class="
-                        relative
-                        z-0
-                        inline-flex
-                        rounded-md
-                        shadow-sm
-                        -space-x-px
-                    "
+          class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
           aria-label="Pagination"
         >
           <component
             :is="previousPageUrl ? 'a' : 'div'"
-            :class="{'cursor-not-allowed': !previousPageUrl}"
+            :class="{
+              'cursor-not-allowed text-gray-400': !previousPageUrl,
+              'text-gray-500 hover:bg-gray-50': previousPageUrl
+            }"
             :href="previousPageUrl"
             :dusk="previousPageUrl ? 'pagination-previous' : null"
-
-            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-500
-                            hover:bg-gray-50
-                        "
-
+            class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium"
             @click.prevent="onClick(previousPageUrl)"
           >
             <span class="sr-only">{{ translations.previous }}</span>
@@ -150,19 +99,7 @@
                 "
                 :href="link.url"
                 :dusk="link.url ? `pagination-${link.label}` : null"
-                class="
-                                    relative
-                                    inline-flex
-                                    items-center
-                                    px-4
-                                    py-2
-                                    border border-gray-300
-                                    bg-white
-                                    text-sm
-                                    font-medium
-                                    text-gray-700
-                                "
-
+                class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700"
                 :class="{
                   'cursor-not-allowed': !link.url,
                   'hover:bg-gray-50': link.url,
@@ -177,23 +114,13 @@
 
           <component
             :is="nextPageUrl ? 'a' : 'div'"
-            :class="{'cursor-not-allowed': !nextPageUrl}"
+            :class="{
+              'cursor-not-allowed text-gray-400': !nextPageUrl,
+              'text-gray-500 hover:bg-gray-50': nextPageUrl
+            }"
             :href="nextPageUrl"
             :dusk="nextPageUrl ? 'pagination-next' : null"
-            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-500
-                            hover:bg-gray-50
-                        "
+            class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium"
             @click.prevent="onClick(nextPageUrl)"
           >
             <span class="sr-only">{{ translations.next }}</span>