initiation librodrome

app/components/book/ChapterHeader.vue

@@ -0,0 +1,62 @@
+<template>
+  <header class="mb-8">
+    <div class="mb-2 flex items-center gap-2">
+      <span class="font-mono text-sm text-primary/70">
+        Chapitre {{ order }}
+      </span>
+      <span v-if="readingTime" class="text-xs text-white/30">
+        · {{ readingTime }}
+      </span>
+    </div>
+    <h1 class="chapter-title font-display font-bold leading-tight tracking-tight text-white">
+      {{ title }}
+    </h1>
+    <p v-if="description" class="mt-3 text-lg text-white/60">
+      {{ description }}
+    </p>
+
+    <!-- Associated songs badges -->
+    <div v-if="songs.length > 0" class="mt-4 flex flex-wrap gap-2">
+      <button
+        v-for="song in songs"
+        :key="song.id"
+        class="inline-flex items-center gap-1.5 rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary transition-colors hover:bg-primary/20"
+        @click="playSong(song)"
+      >
+        <div class="i-lucide-music h-3 w-3" />
+        {{ song.title }}
+      </button>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+import type { Song } from '~/types/song'
+
+const props = defineProps<{
+  title: string
+  description?: string
+  order: number
+  readingTime?: string
+  chapterSlug: string
+}>()
+
+const bookData = useBookData()
+const { loadAndPlay } = useAudioPlayer()
+
+await bookData.init()
+
+const songs = computed(() => bookData.getChapterSongs(props.chapterSlug))
+
+function playSong(song: Song) {
+  loadAndPlay(song)
+}
+</script>
+
+<style scoped>
+.chapter-title {
+  font-size: clamp(2rem, 5vw, 2.75rem);
+  padding-bottom: 0.75rem;
+  border-bottom: 2px solid hsl(12 76% 48% / 0.4);
+}
+</style>