49 lines
1.5 KiB
Vue
49 lines
1.5 KiB
Vue
<template>
|
|
<div class="fixed inset-0 bg-color flex items-center justify-center z-50">
|
|
<div class="bg-white text-black p-6 rounded-lg w-full max-w-md">
|
|
<h2 class="text-2xl font-bold mb-4">Options</h2>
|
|
|
|
<div class="space-y-3">
|
|
<label class="block">
|
|
<span class="text-gray-700">Data Source:</span>
|
|
<select v-model="dataSource" class="mt-1 block w-full">
|
|
<option value="local">Local (Mock)</option>
|
|
<option value="remote">Remote (API)</option>
|
|
</select>
|
|
</label>
|
|
|
|
<label class="block">
|
|
<span class="text-gray-700">Volume:</span>
|
|
<input type="range" min="0" max="100" v-model="volume" class="w-full" />
|
|
</label>
|
|
</div>
|
|
|
|
<div class="mt-6 flex justify-end gap-2">
|
|
<button @click="$emit('close')" class="px-4 py-2 bg-gray-600 text-white rounded">Close</button>
|
|
<button @click="save" class="px-4 py-2 bg-blue-600 text-white rounded">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
|
|
const emit = defineEmits(['close']);
|
|
|
|
const dataSource = ref(localStorage.getItem('dataSource') || 'local');
|
|
const volume = ref(+localStorage.getItem('volume') || 50);
|
|
|
|
function save() {
|
|
localStorage.setItem('dataSource', dataSource.value);
|
|
localStorage.setItem('volume', volume.value.toString());
|
|
emit('close');
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.bg-color {
|
|
background-color: rgba(0, 0, 0, 0.75);
|
|
}
|
|
</style>
|