initiation librodrome

app/components/song/SongLyrics.vue

@@ -0,0 +1,50 @@
+<template>
+  <div v-if="song.lyrics" class="rounded-xl bg-surface p-6">
+    <button
+      class="flex w-full items-center justify-between text-left"
+      @click="isOpen = !isOpen"
+    >
+      <span class="font-display text-sm font-semibold text-white/70">Paroles</span>
+      <div
+        :class="isOpen ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
+        class="h-4 w-4 text-white/40 transition-transform"
+      />
+    </button>
+
+    <Transition name="lyrics-expand">
+      <div v-if="isOpen" class="mt-4">
+        <pre class="whitespace-pre-wrap font-sans text-sm leading-relaxed text-white/60">{{ song.lyrics }}</pre>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Song } from '~/types/song'
+
+defineProps<{
+  song: Song
+}>()
+
+const isOpen = ref(false)
+</script>
+
+<style scoped>
+.lyrics-expand-enter-active,
+.lyrics-expand-leave-active {
+  transition: all 0.3s var(--ease-out-expo);
+  overflow: hidden;
+}
+
+.lyrics-expand-enter-from,
+.lyrics-expand-leave-to {
+  max-height: 0;
+  opacity: 0;
+}
+
+.lyrics-expand-enter-to,
+.lyrics-expand-leave-from {
+  max-height: 500px;
+  opacity: 1;
+}
+</style>