PronounsPage/app/components/ForeignPronoun.vue

<script setup lang="ts">
import { getUrlForLocale } from '~/src/domain.ts';
import type { LocaleCode } from '~~/locale/locales.ts';

const props = defineProps<{
    pronoun: string;
    locale: LocaleCode;
}>();

const base = computed(() => {
    return getUrlForLocale(props.locale);
});

const pronounWithoutDomain = computed(() => {
    return props.pronoun.startsWith(`${base.value}/`)
        ? props.pronoun.substring(base.value.length + 1)
        : props.pronoun;
});

const shortMaxLength = 36;

const { data: pronounName } = useFetch<string>(
    `/api/pronouns-name/${pronounWithoutDomain.value}`,
    { lazy: true, query: { locale: props.locale } },
);

const formattedPronounName = computed(() => {
    if (!pronounName.value) {
        return pronounWithoutDomain.value.split(',')[0].substring(0, 24);
    }
    if (pronounName.value.length > shortMaxLength) {
        return `${pronounName.value.substr(0, shortMaxLength - 1)}…`;
    }
    return pronounName.value;
});
</script>

<template>
    <span class="badge bg-primary text-white mx-1">
        {{ formattedPronounName }}
    </span>
</template>