- vue composition api (#91)

* wip

* fix

Co-authored-by: EwelinaLasowy <ewelina.lasowy@blumilk.pl>

resources/js/Shared/Pagination.vue

@@ -0,0 +1,61 @@
+<template>
+  <div
+    v-if="pagination.last_page !== 1"
+    class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6 rounded-b-lg"
+  >
+    <div class="flex-1 flex justify-between sm:hidden">
+      <Component
+        :is="prevLink ? 'InertiaLink': 'span'"
+        :href="prevLink"
+        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:bg-gray-50"
+      >
+        Poprzednia
+      </Component>
+      <Component
+        :is="nextLink ? 'InertiaLink': 'span'"
+        :href="nextLink"
+        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:bg-gray-50"
+      >
+        Następna
+      </Component>
+    </div>
+    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+      <div class="text-sm text-gray-700">
+        Wyświetlanie
+        <span class="font-medium">{{ pagination.from }}</span>
+        od
+        <span class="font-medium">{{ pagination.to }}</span>
+        do
+        <span class="font-medium">{{ pagination.total }}</span>
+        wyników
+      </div>
+      <nav class="relative z-0 inline-flex space-x-1">
+        <template
+          v-for="(link, index) in pagination.links"
+          :key="index"
+        >
+          <Component
+            :is="link.url ? 'InertiaLink' : 'span'"
+            :href="link.url"
+            :preserve-scroll="true"
+            class="relative inline-flex items-center px-4 py-2 border rounded-md text-sm font-medium"
+            :class="{ 'z-10 bg-blumilk-25 border-blumilk-500 text-blumilk-600': link.active, 'bg-white border-gray-300 text-gray-500': !link.active, 'hover:bg-blumilk-25': link.url, 'border-none': !link.url}"
+            v-text="link.label"
+          />
+        </template>
+      </nav>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  pagination: Object,
+})
+
+const prevLink = computed(() => props.pagination.links.at(0)?.url)
+const nextLink = computed(() => props.pagination.links.at(-1)?.url)
+
+</script>