PronounsPage/components/ComprehensiveSwitch.vue

<template>
    <div v-if="config.pronouns.comprehensive" class="btn-group" role="group">
        <button
            :class="['btn btn-sm', !value ? 'btn-primary' : 'btn-outline-primary']"
            @click="$emit('input', false)"
        >
            <T>pronouns.comprehensive.simple</T>
        </button>
        <button
            :class="['btn btn-sm', value ? 'btn-primary' : 'btn-outline-primary']"
            @click="$emit('input', true)"
        >
            <T>pronouns.comprehensive.comprehensive</T>
        </button>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import useConfig from '../composables/useConfig.ts';

export default defineComponent({
    props: {
        value: { default: false, type: Boolean },
    },
    setup() {
        return {
            config: useConfig(),
        };
    },
});
</script>