PronounsPage/components/NamesEntry.vue

<script setup lang="ts">
import useConfig from '~/composables/useConfig.ts';
import type { Name } from '~/src/classes.ts';
import { clearUrl } from '~/src/helpers.ts';

defineProps<{
    name: Name;
}>();

const { $translator: translator } = useNuxtApp();
const config = useConfig();

const namedaysString = (name: Name) => {
    if (!name.namedays.length) {
        return '';
    }

    const days = name.namedays.map((d) => {
        const [month, day] = d.split('-');
        return translator.translate(`calendar.dates.${month}`, { day });
    });

    return days.join(', ');
};
</script>

<template>
    <div>
        <div class="d-flex justify-content-between">
            <h3>{{ name.name }}</h3>
            <slot></slot>
        </div>
        <div class="d-flex flex-column flex-md-row">
            <ul class="list-unstyled w-md-50">
                <li v-if="name.origin" class="mb-2">
                    <Icon v="map-marked-alt" />
                    <strong><T>names.origin</T><T>quotation.colon</T></strong>
                    {{ name.origin }}
                </li>
                <li v-if="name.meaning" class="mb-2">
                    <Icon v="comment-exclamation" />
                    <strong><T>names.meaning</T><T>quotation.colon</T></strong>
                    <LinkedText :text="name.meaning" />
                </li>
                <li v-if="name.usage" class="mb-2">
                    <Icon v="user-friends" />
                    <strong><T>names.usage</T><T>quotation.colon</T></strong>
                    {{ name.usage }}
                </li>
                <li v-if="config.names.legally && name.legally" class="mb-2">
                    <Icon v="file-contract" />
                    <strong><T>names.legally</T><T>quotation.colon</T></strong>
                    {{ name.legally }}
                </li>
                <li v-if="config.names.count" class="mb-2">
                    <Icon v="users" />
                    <strong><T>names.count</T><T>quotation.colon</T></strong>
                    <NameCount :name="name.name" />
                </li>
                <li v-if="config.names.namedays && name.namedays.length">
                    <Icon v="glass-cheers" />
                    <strong><T>names.namedays</T><T>quotation.colon</T></strong>
                    {{ namedaysString(name) }}
                    <p v-if="name.namedaysComment" class="small">
                        (<LinkedText :text="name.namedaysComment" />)
                    </p>
                </li>
            </ul>
            <ul class="list-unstyled w-md-50">
                <li v-for="pro in name.pros" class="mb-2">
                    <Icon v="plus-circle" />
                    <LinkedText :text="pro" />
                </li>
                <li v-for="con in name.cons" class="mb-2">
                    <Icon v="minus-circle" />
                    <LinkedText :text="con" />
                </li>
                <li v-for="person in name.notablePeople" class="mb-2">
                    <Icon v="user" />
                    <LinkedText :text="person" />
                </li>
                <li v-for="link in name.links" class="mb-2">
                    <Icon v="external-link" />
                    <a :href="link.trim()" target="_blank" rel="noopener">{{ clearUrl(link) }}</a>
                </li>
            </ul>
        </div>
    </div>
</template>