initiation librodrome

app/components/song/SongBadges.vue

@@ -0,0 +1,23 @@
+<template>
+  <div v-if="songs.length > 0" class="flex flex-wrap gap-1">
+    <span
+      v-for="song in songs"
+      :key="song.id"
+      class="inline-flex items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-xs text-primary/70"
+    >
+      <div class="i-lucide-music h-2.5 w-2.5" />
+      {{ song.title }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  chapterSlug: string
+}>()
+
+const bookData = useBookData()
+await bookData.init()
+
+const songs = computed(() => bookData.getChapterSongs(props.chapterSlug))
+</script>