48 lines
1.2 KiB
Vue
48 lines
1.2 KiB
Vue
<template>
|
|
<div class="chapter-page">
|
|
<div class="chapter-header">
|
|
<h1 class="text-2xl font-bold">
|
|
{{ currentChapter?.title || 'Chargement...' }}
|
|
</h1>
|
|
<div class="chapter-info">
|
|
<span class="text-gray-400"> Chapitre {{ currentChapter?.number }} </span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="reader-container">
|
|
<ChapterReader :chapter-id="chapterId" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import { useReaderStore } from '../../application/store/readerStore';
|
|
import ChapterReader from '../components/ChapterReader.vue';
|
|
|
|
const route = useRoute();
|
|
const store = useReaderStore();
|
|
|
|
const chapterId = computed(() => route.params.chapterId);
|
|
const currentChapter = computed(() => store.currentChapter);
|
|
</script>
|
|
|
|
<style lang="postcss" scoped>
|
|
.chapter-page {
|
|
@apply w-full h-full flex flex-col;
|
|
}
|
|
|
|
.chapter-header {
|
|
@apply p-4 bg-gray-800 border-b border-gray-700;
|
|
}
|
|
|
|
.chapter-info {
|
|
@apply mt-2;
|
|
}
|
|
|
|
.reader-container {
|
|
@apply flex-1 overflow-hidden;
|
|
}
|
|
</style>
|