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