23 lines
807 B
Vue
23 lines
807 B
Vue
<script setup lang="ts">
|
|
import { SwitchRoot, SwitchThumb } from 'reka-ui';
|
|
|
|
defineProps<{ id?: string; disabled?: boolean }>();
|
|
|
|
const model = defineModel<boolean>();
|
|
</script>
|
|
|
|
<template>
|
|
<SwitchRoot
|
|
:id="id"
|
|
v-model="model"
|
|
:disabled="disabled"
|
|
class="focus-visible:outline-primary-600 relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-60"
|
|
:class="model ? 'bg-primary-600' : 'bg-slate-300'"
|
|
>
|
|
<SwitchThumb
|
|
class="block size-5 rounded-full bg-white shadow-sm transition-transform"
|
|
:class="model ? 'translate-x-5.5' : 'translate-x-0.5'"
|
|
/>
|
|
</SwitchRoot>
|
|
</template>
|