42 lines
1.0 KiB
Vue
42 lines
1.0 KiB
Vue
<template>
|
|
<div class="flex items-center gap-1 rounded-lg p-1" :class="containerClass">
|
|
<NuxtLink
|
|
v-for="loc in locales"
|
|
:key="loc.code"
|
|
:to="switchLocalePath(loc.code)"
|
|
class="px-3 py-1.5 text-sm font-medium rounded-md transition-colors"
|
|
:class="locale === loc.code ? activeClass : inactiveClass"
|
|
>
|
|
{{ loc.code.toUpperCase() }}
|
|
</NuxtLink>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
variant: {
|
|
type: String,
|
|
default: 'light'
|
|
}
|
|
})
|
|
|
|
const { locale, locales } = useI18n()
|
|
const switchLocalePath = useSwitchLocalePath()
|
|
|
|
const containerClass = computed(() =>
|
|
props.variant === 'dark' ? 'bg-base-200' : 'bg-base-100/10'
|
|
)
|
|
|
|
const activeClass = computed(() =>
|
|
props.variant === 'dark'
|
|
? 'bg-base-100 text-base-content shadow-sm'
|
|
: 'bg-base-100/20 text-base-content'
|
|
)
|
|
|
|
const inactiveClass = computed(() =>
|
|
props.variant === 'dark'
|
|
? 'text-base-content/60 hover:text-base-content'
|
|
: 'text-base-content/60 hover:text-base-content'
|
|
)
|
|
</script>
|