PronounsPage/components/nouns/NounsConventionsIndexItem.vue

<script setup lang="ts">
import { loadNounsData } from '~/src/data.ts';
import type { NounConvention } from '~/src/nouns.ts';

const props = defineProps<{
    nounConvention: WithKey<NounConvention>;
}>();

const nounsData = await loadNounsData();

if (nounsData === undefined) {
    throw new Error('nounsData is undefined');
}

const template = props.nounConvention.templates.t1;

const stems: Record<string, string> = {
    default: 'Arbeit',
    flucht: 'Arbeits',
    partizip: 'Arbeit',
};

const stem = computed(() => {
    return stems[template.stem ?? 'default'];
});

const declension = nounsData.declensions?.[template.declension];

const singularExample = computed(() => {
    if (declension?.singular?.n === undefined) {
        return undefined;
    }

    return `${props.nounConvention.morphemes.article_n ?? ''} ${stem.value}${template.suffix}${declension.singular.n}`;
});

const pluralExample = computed(() => {
    if (declension?.plural?.n === undefined) {
        return undefined;
    }

    return `die ${stem.value}${template.suffix}${declension.plural.n}`;
});
</script>

<template>
    <li>
        <div class="d-flex align-items-center flex-wrap">
            <div class="col-12 col-md-4">
                <nuxt-link :to="nounConvention.key">{{ nounConvention.name }}</nuxt-link>
                <NormativeBadge v-if="nounConvention.normative" />
            </div>
            <span class="col">
                <template v-if="singularExample">
                    ⋅ {{ singularExample }}
                </template>
            </span>
            <span class="col">
                <template v-if="pluralExample">
                    ⁖ {{ pluralExample }}
                </template>
            </span>
        </div>
    </li>
</template>