45 lines
954 B
Vue
45 lines
954 B
Vue
<script setup>
|
|
import { Globe } from '@lucide/vue';
|
|
import { language, languageOptions, setLanguage, t } from './i18n';
|
|
</script>
|
|
|
|
<template>
|
|
<label class="language-picker">
|
|
<Globe :size="16" aria-hidden="true" />
|
|
<select :value="language" :aria-label="t('언어')" @change="setLanguage($event.target.value)">
|
|
<option
|
|
v-for="option in languageOptions"
|
|
:key="option.value"
|
|
:value="option.value"
|
|
:lang="option.value"
|
|
>
|
|
{{ option.label }}
|
|
</option>
|
|
</select>
|
|
</label>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.language-picker {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
color: var(--muted);
|
|
}
|
|
.language-picker select {
|
|
width: auto;
|
|
min-height: 40px;
|
|
padding: 6px 8px;
|
|
border: 0;
|
|
background: transparent;
|
|
color: inherit;
|
|
font: inherit;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
}
|
|
.language-picker option {
|
|
background: var(--surface);
|
|
color: var(--ink);
|
|
}
|
|
</style>
|