first commit

resources/js/components/ui/Pagination.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { Link } from '@inertiajs/vue3';
+import { computed } from 'vue';
+
+/** One entry of Laravel's paginator `links` array. */
+export interface PaginatorLink {
+    url: string | null;
+    label: string;
+    active: boolean;
+}
+
+const props = defineProps<{
+    links: PaginatorLink[];
+    /** Total results, used for the "showing x of y" line. */
+    total?: number;
+}>();
+
+/** Laravel emits the prev/next labels as HTML entities. */
+const cleaned = computed(() =>
+    props.links.map((link) => ({
+        ...link,
+        label: link.label.replace('&laquo;', '‹').replace('&raquo;', '›'),
+    })),
+);
+</script>
+
+<template>
+    <nav v-if="links.length > 3" class="mt-4 flex flex-wrap justify-end gap-1">
+        <component
+            :is="link.url ? Link : 'span'"
+            v-for="(link, index) in cleaned"
+            :key="index"
+            :href="link.url ?? undefined"
+            preserve-scroll
+            class="inline-flex min-w-9 items-center justify-center rounded-md border px-3 py-1.5"
+            :class="[
+                link.active
+                    ? 'border-primary-600 bg-primary-600 text-white'
+                    : 'border-slate-200 bg-white text-slate-600',
+                link.url ? 'hover:border-primary-600 hover:text-primary-600' : 'cursor-default opacity-50',
+            ]"
+        >
+            {{ link.label }}
+        </component>
+    </nav>
+</template>