feat: add withdraw request functionality and UI components
This commit is contained in:
@@ -7,50 +7,39 @@ const props = defineProps([
|
||||
'perPage',
|
||||
'links',
|
||||
])
|
||||
|
||||
const pageItemClass = 'flex items-center justify-center w-8 h-8 rounded-lg border text-[11px] font-semibold transition-colors';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="pagination" v-if="lastPage > 1">
|
||||
<nav class="flex items-center gap-1.5 p-4" v-if="lastPage > 1">
|
||||
<template v-for="(link , index) in links" :key="index">
|
||||
<div class="paginate" v-if="link.label == 'قبلی'">
|
||||
<Link v-if="link.url" :href="link.url">
|
||||
<i class="fi fi-rr-angle-small-right flex text-xl"></i>
|
||||
<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>
|
||||
</div>
|
||||
<div class="paginate" v-else-if="link.label == 'بعدی'">
|
||||
<Link v-if="link.url" :href="link.url">
|
||||
<i class="fi fi-rr-angle-small-left flex text-xl"></i>
|
||||
<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>
|
||||
</div>
|
||||
<div class="paginate flex items-center" :class="{'!text-white !bg-client-primary' : currentPage == link.label }" v-else>
|
||||
<Link v-if="link.url" :href="link.url" class="flex pt-1">{{link.label}}</Link>
|
||||
<Link v-else href="" class="flex">{{link.label}}</Link>
|
||||
</div>
|
||||
<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>
|
||||
</section>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<style lang="postcss">
|
||||
section.pagination{
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
section.pagination div.paginate:first-child a{
|
||||
border-top-right-radius: .4rem;
|
||||
border-bottom-right-radius: .4rem;
|
||||
}
|
||||
section.pagination div.paginate:last-child a{
|
||||
border-top-left-radius: .4rem;
|
||||
border-bottom-left-radius: .4rem;
|
||||
}
|
||||
section.pagination div.paginate a{
|
||||
display: flex;
|
||||
height: 2.2rem;
|
||||
width: 2.2rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #e6e6e6;
|
||||
@apply text-client-Fontcolor
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user