40 lines
1.5 KiB
Vue
40 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import { Monitor, Moon, Sun } from 'lucide-vue-next';
|
|
import { useAppearance } from '@/composables/useAppearance';
|
|
import { useLocalization } from '@/composables/useLocalization';
|
|
|
|
const { appearance, updateAppearance } = useAppearance();
|
|
const { t } = useLocalization();
|
|
|
|
const tabs = [
|
|
{ value: 'light', Icon: Sun, label: 'appearance.light' },
|
|
{ value: 'dark', Icon: Moon, label: 'appearance.dark' },
|
|
{ value: 'system', Icon: Monitor, label: 'appearance.system' },
|
|
] as const;
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
role="group"
|
|
:aria-label="t('appearance.label')"
|
|
class="border-border bg-muted inline-flex max-w-full gap-1 rounded-lg border p-1"
|
|
>
|
|
<button
|
|
v-for="{ value, Icon, label } in tabs"
|
|
:key="value"
|
|
type="button"
|
|
:aria-pressed="appearance === value"
|
|
@click="updateAppearance(value)"
|
|
:class="[
|
|
'min-h-control text-body focus-visible:outline-ring flex min-w-0 items-center justify-center gap-1.5 rounded-md px-3 font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2',
|
|
appearance === value
|
|
? 'bg-primary text-primary-foreground'
|
|
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
|
|
]"
|
|
>
|
|
<component :is="Icon" class="size-4 shrink-0" aria-hidden="true" />
|
|
<span>{{ t(label) }}</span>
|
|
</button>
|
|
</div>
|
|
</template>
|