initiation librodrome

app/pages/admin/songs.vue

@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <div class="flex items-center justify-between mb-6">
+      <h1 class="font-display text-2xl font-bold text-white">Chansons</h1>
+      <AdminSaveButton :saving="saving" :saved="saved" @save="save" />
+    </div>
+
+    <template v-if="config">
+      <AdminFormSection title="Métadonnées des chansons" open>
+        <div
+          v-for="(song, i) in config.songs"
+          :key="i"
+          class="song-row"
+        >
+          <span class="song-num">{{ i + 1 }}</span>
+          <div class="flex-1 grid gap-2 sm:grid-cols-2">
+            <input
+              v-model="song.title"
+              class="admin-input"
+              placeholder="Titre"
+            />
+            <input
+              v-model="song.file"
+              class="admin-input"
+              placeholder="/audio/fichier.mp3"
+            />
+          </div>
+        </div>
+      </AdminFormSection>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: 'admin',
+  middleware: 'admin',
+})
+
+const { data: config } = await useFetch('/api/content/config')
+const saving = ref(false)
+const saved = ref(false)
+
+async function save() {
+  saving.value = true
+  saved.value = false
+  try {
+    await $fetch('/api/admin/content/config', {
+      method: 'PUT',
+      body: config.value,
+    })
+    saved.value = true
+    setTimeout(() => { saved.value = false }, 2000)
+  }
+  finally {
+    saving.value = false
+  }
+}
+</script>
+
+<style scoped>
+.song-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem;
+  border-bottom: 1px solid hsl(20 8% 10%);
+}
+
+.song-num {
+  font-family: var(--font-mono, monospace);
+  font-size: 0.8rem;
+  color: hsl(20 8% 40%);
+  width: 1.25rem;
+  text-align: right;
+}
+
+.admin-input {
+  padding: 0.375rem 0.5rem;
+  border-radius: 0.375rem;
+  border: 1px solid hsl(20 8% 18%);
+  background: hsl(20 8% 6%);
+  color: white;
+  font-size: 0.8rem;
+  width: 100%;
+}
+
+.admin-input:focus {
+  outline: none;
+  border-color: hsl(12 76% 48% / 0.5);
+}
+</style>