initiation librodrome

app/components/admin/AdminSaveButton.vue

@@ -0,0 +1,54 @@
+<template>
+  <button
+    class="save-btn"
+    :class="{ 'save-btn--saving': saving, 'save-btn--saved': saved }"
+    :disabled="saving"
+    @click="$emit('save')"
+  >
+    <div v-if="saving" class="i-lucide-loader-2 h-4 w-4 animate-spin" />
+    <div v-else-if="saved" class="i-lucide-check h-4 w-4" />
+    <div v-else class="i-lucide-save h-4 w-4" />
+    {{ saving ? 'Sauvegarde...' : saved ? 'Sauvegardé' : 'Sauvegarder' }}
+  </button>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  saving?: boolean
+  saved?: boolean
+}>()
+
+defineEmits<{
+  save: []
+}>()
+</script>
+
+<style scoped>
+.save-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 1.25rem;
+  border-radius: 0.5rem;
+  border: none;
+  background: hsl(12 76% 48%);
+  color: white;
+  font-weight: 600;
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.save-btn:hover:not(:disabled) {
+  background: hsl(12 76% 42%);
+}
+
+.save-btn:disabled {
+  opacity: 0.7;
+  cursor: wait;
+}
+
+.save-btn--saved {
+  background: hsl(140 50% 40%);
+}
+</style>