58 lines
1.4 KiB
Vue
58 lines
1.4 KiB
Vue
<template>
|
|
<div class="reader-controls">
|
|
<button @click="onPrevious" :disabled="isFirstPage">
|
|
<ChevronLeftIcon class="h-6 w-6" />
|
|
</button>
|
|
<div class="page-info"> {{ currentPage + 1 }} / {{ totalPages }} </div>
|
|
<button @click="onNext" :disabled="isLastPage">
|
|
<ChevronRightIcon class="h-6 w-6" />
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/24/outline';
|
|
|
|
defineProps({
|
|
currentPage: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
totalPages: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
isFirstPage: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
isLastPage: {
|
|
type: Boolean,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(['previous', 'next']);
|
|
|
|
const onPrevious = () => emit('previous');
|
|
const onNext = () => emit('next');
|
|
</script>
|
|
|
|
<style lang="postcss" scoped>
|
|
.reader-controls {
|
|
@apply flex items-center justify-between p-4 bg-gray-800;
|
|
}
|
|
|
|
.page-info {
|
|
@apply text-lg font-medium;
|
|
}
|
|
|
|
button {
|
|
@apply px-4 py-2 bg-gray-700 rounded hover:bg-gray-600 transition-colors;
|
|
}
|
|
|
|
button:disabled {
|
|
@apply opacity-50 cursor-not-allowed;
|
|
}
|
|
</style>
|