PronounsPage/components/nouns/NounsConventionsIndexGroup.vue

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

const props = defineProps<{
    nounConventionGroup: NounConventionGroup;
}>();

const nounsData = await loadNounsData();
if (nounsData === undefined) {
    throw new Error('nounsData is undefined');
}
const visibleNounConventions = computed(() => {
    return withKey(nounsData.conventions ?? {}).filter((nounConvention) => {
        return props.nounConventionGroup.conventions.includes(nounConvention.key);
    });
});
</script>

<template>
    <p class="h5">
        <Spelling :text="nounConventionGroup.name" />
    </p>
    <p v-if="nounConventionGroup.description" class="small my-1">
        <Icon v="info-circle" />
        <LinkedText :text="nounConventionGroup.description" />
    </p>
    <ul>
        <NounsConventionsIndexItem
            v-for="nounConvention of visibleNounConventions"
            :key="nounConvention.key"
            :noun-convention
        />
    </ul>
</template>