27 lines
604 B
Vue
27 lines
604 B
Vue
|
<template>
|
||
|
|
<div class="mode-switcher">
|
||
|
|
<button
|
||
|
|
v-for="m in modes"
|
||
|
|
:key="m.id"
|
||
|
|
@click="uiMode.setMode(m.id)"
|
||
|
|
class="mode-switcher-btn"
|
||
|
|
:class="{ 'mode-switcher-btn-active': uiMode.mode === m.id }"
|
||
|
|
>
|
||
|
|
{{ m.label }}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { useUIModeStore } from '@/stores/uiMode'
|
||
|
|
import type { UIMode } from '@/types/api'
|
||
|
|
|
||
|
|
const uiMode = useUIModeStore()
|
||
|
|
|
||
|
|
const modes: { id: UIMode; label: string }[] = [
|
||
|
|
{ id: 'easy', label: 'Easy' },
|
||
|
|
{ id: 'gamer', label: 'Pro' },
|
||
|
|
{ id: 'chat', label: 'Chat' },
|
||
|
|
]
|
||
|
|
</script>
|