<script lang="ts" setup>
defineProps<{
first: string
second: string
}>()
const enabled = ref(false)
function toggle() {
enabled.value = !enabled.value
}
</script>
<template>
<Switch
v-model="enabled"
class="relative grid grid-cols-2 bg-grey-900 gap-2 border-box-border rounded-full border p-1 cursor-pointer"
@click="toggle"
>
<span
class="select-none text-center rounded-full px-2 py-1 text-xs transition-all"
:class="enabled ? 'bg-purple-500' : ''"
>{{ first }}</span>
<span
class="select-none text-center rounded-full px-2 py-1 text-xs transition-all"
:class="!enabled ? 'bg-purple-500' : ''"
>{{ second }}</span>
</Switch>
</template>
<script lang="ts" setup>
defineProps<{
first: string
second: string
}>()
const enabled = ref(false)
function toggle() {
enabled.value = !enabled.value
}
</script>
<template>
<Switch
v-model="enabled"
class="relative grid grid-cols-2 bg-grey-900 gap-2 border-box-border rounded-full border p-1 cursor-pointer"
@click="toggle"
>
<span
class="select-none text-center rounded-full px-2 py-1 text-xs transition-all"
:class="enabled ? 'bg-purple-500' : ''"
>{{ first }}</span>
<span
class="select-none text-center rounded-full px-2 py-1 text-xs transition-all"
:class="!enabled ? 'bg-purple-500' : ''"
>{{ second }}</span>
</Switch>
</template>