initiation librodrome

app/components/player/PlayerModeToggle.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="flex items-center gap-2 rounded-full bg-surface-200 p-1">
+    <button
+      class="mode-btn"
+      :class="{ active: store.isGuidedMode }"
+      @click="setMode('guided')"
+    >
+      <div class="i-lucide-book-open h-3.5 w-3.5" />
+      <span class="hidden sm:inline">Guidé</span>
+    </button>
+    <button
+      class="mode-btn"
+      :class="{ active: !store.isGuidedMode }"
+      @click="setMode('free')"
+    >
+      <div class="i-lucide-headphones h-3.5 w-3.5" />
+      <span class="hidden sm:inline">Libre</span>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PlayerMode } from '~/types/player'
+
+const store = usePlayerStore()
+
+function setMode(mode: PlayerMode) {
+  store.setMode(mode)
+}
+</script>
+
+<style scoped>
+.mode-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.75rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: hsl(0 0% 100% / 0.5);
+  transition: all 0.2s;
+}
+
+.mode-btn:hover {
+  color: hsl(0 0% 100% / 0.8);
+}
+
+.mode-btn.active {
+  background: hsl(12 76% 48%);
+  color: white;
+}
+</style>