feat: add withdraw request functionality and UI components

This commit is contained in:
2026-08-27 02:39:57 +03:30
parent aeef95339d
commit 4ce663c669
115 changed files with 4064 additions and 315 deletions
@@ -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>