111 lines
3.1 KiB
Vue
111 lines
3.1 KiB
Vue
<template>
|
|
<div class="section-padding">
|
|
<div class="container-content">
|
|
<header class="mb-12 text-center">
|
|
<p class="mb-2 font-mono text-sm tracking-widest text-accent uppercase">{{ content?.kicker }}</p>
|
|
<h1 class="page-title font-display font-bold tracking-tight text-white">
|
|
{{ content?.title }}
|
|
</h1>
|
|
<p class="mt-4 mx-auto max-w-2xl text-white/60">
|
|
{{ content?.description }}
|
|
</p>
|
|
</header>
|
|
|
|
<!-- Search + view toggle -->
|
|
<div class="mb-6 flex items-center justify-between gap-4">
|
|
<div class="relative flex-1 max-w-md">
|
|
<div class="i-lucide-search absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-white/30" />
|
|
<input
|
|
v-model="search"
|
|
type="text"
|
|
:placeholder="content?.searchPlaceholder"
|
|
class="w-full rounded-lg bg-surface border border-white/8 py-2 pl-10 pr-4 text-sm text-white placeholder:text-white/30 focus:border-primary/50 focus:outline-none"
|
|
>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-1 rounded-lg bg-surface p-1">
|
|
<button
|
|
class="rounded p-1.5 transition-colors"
|
|
:class="viewMode === 'list' ? 'bg-white/10 text-white' : 'text-white/40'"
|
|
@click="viewMode = 'list'"
|
|
>
|
|
<div class="i-lucide-list h-4 w-4" />
|
|
</button>
|
|
<button
|
|
class="rounded p-1.5 transition-colors"
|
|
:class="viewMode === 'grid' ? 'bg-white/10 text-white' : 'text-white/40'"
|
|
@click="viewMode = 'grid'"
|
|
>
|
|
<div class="i-lucide-grid-3x3 h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Song list -->
|
|
<div v-if="viewMode === 'list'" class="flex flex-col gap-2">
|
|
<SongItem
|
|
v-for="song in filteredSongs"
|
|
:key="song.id"
|
|
:song="song"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Song grid -->
|
|
<div v-else class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
|
<SongItem
|
|
v-for="song in filteredSongs"
|
|
:key="song.id"
|
|
:song="song"
|
|
/>
|
|
</div>
|
|
|
|
<p v-if="filteredSongs.length === 0" class="text-center text-white/40 py-12">
|
|
{{ content?.noResults }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
definePageMeta({
|
|
layout: 'default',
|
|
})
|
|
|
|
const { data: content } = await usePageContent('ecouter')
|
|
|
|
useHead({
|
|
title: content.value?.meta?.title ?? 'Écouter',
|
|
})
|
|
|
|
const store = usePlayerStore()
|
|
const bookData = useBookData()
|
|
const { loadFullPlaylist } = usePlaylist()
|
|
|
|
await bookData.init()
|
|
|
|
// Switch to free mode
|
|
store.setMode('free')
|
|
await loadFullPlaylist()
|
|
|
|
const search = ref('')
|
|
const viewMode = ref<'list' | 'grid'>('list')
|
|
|
|
const filteredSongs = computed(() => {
|
|
const songs = bookData.getSongs()
|
|
if (!search.value.trim()) return songs
|
|
|
|
const q = search.value.toLowerCase()
|
|
return songs.filter(
|
|
s => s.title.toLowerCase().includes(q)
|
|
|| s.artist.toLowerCase().includes(q)
|
|
|| s.tags.some(t => t.toLowerCase().includes(q)),
|
|
)
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-title {
|
|
font-size: clamp(2rem, 5vw, 2.75rem);
|
|
}
|
|
</style>
|