51 lines
1.1 KiB
Vue
51 lines
1.1 KiB
Vue
<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>
|