90 lines
2.6 KiB
Vue
90 lines
2.6 KiB
Vue
<template>
|
|
<div class="chapter-navigation">
|
|
<button
|
|
v-if="hasPreviousChapter"
|
|
@click="goToPreviousChapter"
|
|
class="nav-button nav-button-previous"
|
|
:disabled="isLoading"
|
|
title="Chapitre précédent"
|
|
>
|
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
<span class="hidden sm:inline">Chapitre précédent</span>
|
|
<span class="sm:hidden">Précédent</span>
|
|
</button>
|
|
|
|
<div class="flex-1"></div>
|
|
|
|
<button
|
|
v-if="hasNextChapter"
|
|
@click="goToNextChapter"
|
|
class="nav-button nav-button-next"
|
|
:disabled="isLoading"
|
|
title="Chapitre suivant"
|
|
>
|
|
<span class="hidden sm:inline">Chapitre suivant</span>
|
|
<span class="sm:hidden">Suivant</span>
|
|
<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue';
|
|
import { useReaderStore } from '../../application/store/readerStore';
|
|
|
|
const store = useReaderStore();
|
|
|
|
const props = defineProps({
|
|
position: {
|
|
type: String,
|
|
default: 'top', // 'top' ou 'bottom'
|
|
validator: (value) => ['top', 'bottom'].includes(value)
|
|
}
|
|
});
|
|
|
|
const hasPreviousChapter = computed(() => store.hasPreviousChapter);
|
|
const hasNextChapter = computed(() => store.hasNextChapter);
|
|
const isLoading = computed(() => store.isLoading);
|
|
|
|
const goToPreviousChapter = async () => {
|
|
await store.goToPreviousChapter();
|
|
};
|
|
|
|
const goToNextChapter = async () => {
|
|
await store.goToNextChapter();
|
|
};
|
|
</script>
|
|
|
|
<style lang="postcss" scoped>
|
|
.chapter-navigation {
|
|
@apply flex items-center justify-between w-full px-4 py-3;
|
|
@apply bg-gray-800/80 backdrop-blur-sm border border-gray-700/50;
|
|
@apply rounded-lg shadow-lg;
|
|
}
|
|
|
|
.nav-button {
|
|
@apply flex items-center px-4 py-2;
|
|
@apply bg-blue-600 hover:bg-blue-700 text-white;
|
|
@apply rounded-md transition-all duration-200;
|
|
@apply disabled:opacity-50 disabled:cursor-not-allowed;
|
|
@apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
|
|
@apply font-medium text-sm;
|
|
}
|
|
|
|
.nav-button:disabled {
|
|
@apply hover:bg-blue-600;
|
|
}
|
|
|
|
.nav-button-previous {
|
|
@apply mr-auto;
|
|
}
|
|
|
|
.nav-button-next {
|
|
@apply ml-auto;
|
|
}
|
|
</style>
|