PronounsPage/components/pronouns/PronounsGenerator.vue

<script setup lang="ts">
import { getUrlForLocale } from '~/src/domain.ts';
import { addSlash } from '~/src/helpers.ts';
import { addPronounInjectionKey } from '~/src/injectionKeys.ts';

const props = defineProps<{
    type: 'generator' | 'alt' | 'null' | 'emoji';
    path: string | null;
    disclaimer?: boolean;
    initiallyOpen?: boolean;
}>();

const addPronoun = inject(addPronounInjectionKey, undefined);

const config = useConfig();

const open = ref(props.initiallyOpen ?? false);

const link = computed((): string | null => {
    if (!props.path) {
        return null;
    }

    return addSlash(`${getUrlForLocale(config.locale) + (config.pronouns.prefix || '')}/${props.path}`);
});
</script>

<template>
    <button v-if="!open" type="button" class="btn btn-outline-primary w-100" @click="open = true">
        <Icon v="sliders-h-square" />
        <T v-if="type === 'generator'">home.generator.button</T>
        <T v-else>pronouns.{{ type }}.button</T>
    </button>
    <div v-else class="card">
        <div class="card-header">
            <Icon v="sliders-h-square" />
            <T v-if="type === 'generator'">home.generator.header2</T>
            <template v-else>
                <T>pronouns.{{ type }}.button</T><T>quotation.colon</T>
            </template>
        </div>
        <div class="card-body">
            <slot></slot>
        </div>
        <div v-if="path && link" class="card-footer">
            <LinkInput v-if="addPronoun === undefined" :link />
            <div v-else class="input-group my-2">
                <input class="form-control" readonly :value="path">
                <button
                    type="button"
                    class="btn btn-outline-success"
                    @click="addPronoun(path)"
                >
                    <Icon v="plus-circle" />
                </button>
            </div>
            <div v-if="disclaimer && (config.pronouns.generator?.disclaimer ?? true)" class="alert alert-warning">
                <Icon v="exclamation-triangle" />
                <T>pronouns.generated</T>
            </div>
        </div>
    </div>
</template>