82 lines
1.8 KiB
Vue
82 lines
1.8 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
defineProps<{
|
||
|
|
label?: string
|
||
|
|
hint?: string
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const enabled = defineModel<boolean>()
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div
|
||
|
|
flex
|
||
|
|
flex-col
|
||
|
|
gap-8px
|
||
|
|
lg="flex flex-row gap-24px"
|
||
|
|
relative
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
flex
|
||
|
|
items-center
|
||
|
|
gap-24px
|
||
|
|
lg="w-1/2"
|
||
|
|
>
|
||
|
|
<HeadlessSwitch
|
||
|
|
v-model="enabled"
|
||
|
|
:class="enabled ? 'bg-white/10' : 'bg-white/10'"
|
||
|
|
class="relative inline-flex h-[28px] w-[68px] shrink-0 cursor-pointer transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75"
|
||
|
|
>
|
||
|
|
<span
|
||
|
|
aria-hidden="true"
|
||
|
|
:class="enabled ? 'translate-x-9 bg-app-white' : 'translate-x-0 bg-app-black border-2 border-app-white'"
|
||
|
|
flex
|
||
|
|
items-center
|
||
|
|
class="pointer-events-none inline-block h-[28px] w-[32px] transform shadow-lg ring-0 transition duration-200 ease-in-out"
|
||
|
|
>
|
||
|
|
<UnoIcon
|
||
|
|
v-if="enabled"
|
||
|
|
transition
|
||
|
|
duration-200
|
||
|
|
ease-in-out
|
||
|
|
i-heroicons-solid-check
|
||
|
|
w-full
|
||
|
|
text-20px
|
||
|
|
text-app-black
|
||
|
|
/>
|
||
|
|
<UnoIcon
|
||
|
|
v-else
|
||
|
|
transition
|
||
|
|
duration-200
|
||
|
|
ease-in-out
|
||
|
|
i-heroicons-solid-x
|
||
|
|
w-full
|
||
|
|
text-20px
|
||
|
|
text-app-white
|
||
|
|
/>
|
||
|
|
</span>
|
||
|
|
</HeadlessSwitch>
|
||
|
|
<span
|
||
|
|
v-if="label"
|
||
|
|
text-14px
|
||
|
|
font-400
|
||
|
|
lg="text-16px"
|
||
|
|
:class="enabled ? 'text-app-white' : 'text-app-white/50'"
|
||
|
|
>
|
||
|
|
{{ label }}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<span
|
||
|
|
v-if="hint"
|
||
|
|
lg="left-1/2 self-center"
|
||
|
|
font-400
|
||
|
|
italic
|
||
|
|
lg:text-14px
|
||
|
|
text-12px
|
||
|
|
text-app-white
|
||
|
|
opacity-50
|
||
|
|
>
|
||
|
|
{{ hint }}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</template>
|