Archive/clean-cuts
1
0
Fork 0
mirror of https://github.com/BlossomiShymae/clean-cuts.git synced 2025-12-06 10:10:47 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Init commit

Browse Source
This commit is contained in:
Blossomi Shymae
2024-05-01 20:38:02 -05:00
commit 75bc1827e4
29 changed files with 11845 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
components/Pagination.vue Normal file
View File

@@ -0,0 +1,41 @@
<template>
<div class="btn-group">
<NuxtLink :class="`btn btn-outline-dark ${hasFurtherPreviousCss}`">
<MaterialIcon name="chevron-double-left" :size="32" />
</NuxtLink>
<NuxtLink :class="`btn btn-outline-dark ${hasPreviousCss}`">
<MaterialIcon name="chevron-left" :size="32" />
</NuxtLink>
<NuxtLink :class="`btn btn-outline-dark text-light`">
{{ pageIndex / totalPages }}
</NuxtLink>
<NuxtLink :class="`btn btn-outline-dark ${hasNextCss}`">
<MaterialIcon name="chevron-right" :size="32" />
</NuxtLink>
<NuxtLink :class="`btn btn-outline-dark ${hasFurtherNextCss}`">
<MaterialIcon name="chevron-double-right" :size="32" />
</NuxtLink>
</div>
</template>
<script setup lang="ts">
import MaterialIcon from './MaterialIcon.vue';
const props = defineProps<{
hasPrevious: boolean;
hasFurtherPrevious: boolean;
hasNext: boolean;
hasFurtherNext: boolean;
pageIndex: number;
totalPages: number;
}>();
const hasPreviousCss = !props.hasPrevious ? "disabled" : "";
const hasFurtherPreviousCss = !props.hasFurtherPrevious ? "disabled" : "";
const hasNextCss = !props.hasNext ? "disabled" : "";
const hasFurtherNextCss = !props.hasFurtherNext ? "disabled" : "";
</script>
<style lang="scss" scoped>
</style>