PronounsPage/components/NameCount.vue

<script setup lang="ts">
import useConfig from '~/composables/useConfig.ts';
import { loadNameCount } from '~/src/data.ts';

const props = defineProps<{
    name: string;
}>();

const config = useConfig();

const nameCount = await loadNameCount();

const versions = computed(() => {
    return props.name.split('/');
});

const count = (name: string, sex: string, ordinal: string) => {
    const counts = nameCount[name.toUpperCase()];
    if (counts === undefined) {
        return 0;
    }

    return counts[sex][parseInt(ordinal) - 1];
};
</script>

<template>
    <ul>
        <template v-for="version in versions">
            <li v-for="(ordinalDesc, ordinal) in config.names.countOrdinal" class="my-1">
                <strong>
                    {{ version }}
                    <small v-if="ordinalDesc">({{ ordinalDesc }})</small>:
                </strong>
                <span
                    v-for="(icon, key) in config.names.countSex"
                    :key="key"
                    class="badge bg-light text-dark badge-big border mx-1"
                >
                    <Icon :v="icon" />
                    {{ count(version, key, ordinal) }}
                </span>
            </li>
        </template>
    </ul>
</template>

<style lang="scss" scoped>
    .badge-big {
        font-size: 1em;
        font-weight: normal;
    }
</style>