PronounsPage/app/components/AdminDashboardCard.vue

<script setup lang="ts">
import LocaleLink from '~/components/LocaleLink.vue';

interface Count {
    name?: string;
    count: number;
    warning?: number;
    danger?: number;
    link?: string;
    enabled?: boolean;
}

const props = withDefaults(
    defineProps<{
        locale?: string;
        icon: string;
        header: string;
        link?: string;
        counts?: Count[];
    }>(),
    {
        counts: () => [],
    },
);

const visibleCounts = computed((): Count[] => {
    return props.counts.filter(({ enabled }) => enabled !== false);
});

const counterClass = (count: number, warning: number | undefined, danger: number | undefined): string => {
    if (danger && count >= danger) {
        return 'text-bg-danger';
    }
    if (warning && count >= warning) {
        return 'text-bg-warning';
    }
    return 'bg-light text-dark border';
};
</script>

<template>
    <div class="col-12 col-lg-3">
        <component
            :is="link ? LocaleLink : 'div'"
            :link
            :locale="link ? locale : undefined"
            class="card mb-3"
            style="min-height: 128px;"
        >
            <div class="card-body text-center d-flex align-items-center">
                <div class="w-100">
                    <h4>
                        <Icon :v="icon" />
                        {{ header }}
                    </h4>
                    <ul class="list-inline h5">
                        <li
                            v-for="{ name, count, warning, danger, link: sublink } in visibleCounts"
                            :key="name"
                            class="list-inline-item"
                        >
                            <component
                                :is="sublink ? LocaleLink : 'span'"
                                :link="sublink"
                                :locale="sublink ? locale : undefined"
                                :class="['badge', counterClass(count, warning, danger)]"
                            >
                                {{ count }} {{ name || '' }}
                            </component>
                        </li>
                    </ul>
                    <slot></slot>
                </div>
            </div>
        </component>
    </div>
</template>