PronounsPage/components/PronounGroup.vue

<script setup lang="ts">
import type { PronounGroup, Pronoun } from '~/src/classes.ts';

defineProps<{
    pronounGroup?: PronounGroup;
    pronouns: Record<string, Pronoun> | Pronoun[] | string[];
}>();
</script>

<template>
    <section>
        <ul class="list-group mt-4">
            <li class="list-group-item">
                <p v-if="pronounGroup?.name" class="h5">
                    <Spelling :text="pronounGroup.name" />
                </p>
                <p v-if="pronounGroup?.description" class="small my-1">
                    <Icon v="info-circle" />
                    <LinkedText :text="pronounGroup.description" />
                </p>
                <SimplePronounList :pronouns="Array.isArray(pronouns) ? pronouns : Object.values(pronouns)" />
            </li>
            <nuxt-link
                :to="{ name: 'pronouns' }"
                class="list-group-item list-group-item-action text-center"
                :title="$t('home.pronouns')"
            >
                <Icon v="ellipsis-h-alt" />
            </nuxt-link>
        </ul>
    </section>
</template>