46 lines
2.1 KiB
Vue
46 lines
2.1 KiB
Vue
<script setup>
|
|
import {Link} from "@inertiajs/inertia-vue3";
|
|
const props = defineProps([
|
|
'currentPage',
|
|
'lastPage',
|
|
'total',
|
|
'perPage',
|
|
'links',
|
|
])
|
|
|
|
const pageItemClass = 'flex items-center justify-center w-8 h-8 rounded-lg border text-[11px] font-semibold transition-colors';
|
|
</script>
|
|
|
|
<template>
|
|
<nav class="flex items-center gap-1.5 p-4" v-if="lastPage > 1">
|
|
<template v-for="(link , index) in links" :key="index">
|
|
<template v-if="link.label == 'قبلی'">
|
|
<Link v-if="link.url" :href="link.url" :class="pageItemClass" class="border-complement-100 text-complement-700 hover:bg-complement-50">
|
|
<i class="fi fi-rr-angle-small-right flex text-base"></i>
|
|
</Link>
|
|
<span v-else :class="pageItemClass" class="border-complement-100 text-complement-200">
|
|
<i class="fi fi-rr-angle-small-right flex text-base"></i>
|
|
</span>
|
|
</template>
|
|
<template v-else-if="link.label == 'بعدی'">
|
|
<Link v-if="link.url" :href="link.url" :class="pageItemClass" class="border-complement-100 text-complement-700 hover:bg-complement-50">
|
|
<i class="fi fi-rr-angle-small-left flex text-base"></i>
|
|
</Link>
|
|
<span v-else :class="pageItemClass" class="border-complement-100 text-complement-200">
|
|
<i class="fi fi-rr-angle-small-left flex text-base"></i>
|
|
</span>
|
|
</template>
|
|
<template v-else>
|
|
<Link
|
|
v-if="link.url"
|
|
:href="link.url"
|
|
:class="[pageItemClass, currentPage == link.label ? 'bg-dominant border-dominant text-white' : 'border-complement-100 text-complement-900 hover:bg-complement-50']"
|
|
>
|
|
{{ link.label }}
|
|
</Link>
|
|
<span v-else :class="pageItemClass" class="border-transparent text-complement-700">{{ link.label }}</span>
|
|
</template>
|
|
</template>
|
|
</nav>
|
|
</template>
|