PronounsPage/components/AdminDashboardCard.vue

<template>
    <div class="col-12 col-lg-3">
        <component :is="link ? 'a' : 'div'" :href="baseUrl + link" 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 } in visibleCounts" class="list-inline-item">
                            <component
                                :is="link ? 'a' : 'span'"
                                :href="baseUrl + link"
                                :class="['badge', counterClass(count, warning, danger)]"
                            >
                                {{ count }} {{ name || '' }}
                            </component>
                        </li>
                    </ul>
                    <slot></slot>
                </div>
            </div>
        </component>
    </div>
</template>

<script lang="ts">
import type { PropType } from 'vue';
import Vue from 'vue';

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

export default Vue.extend({
    props: {
        baseUrl: { default: '', type: String },
        icon: { required: true, type: String },
        header: { required: true, type: String },
        link: { required: false, type: String },
        counts: { default: () => [], type: Array as PropType<Count[]> },
    },
    computed: {
        visibleCounts(): Count[] {
            return this.counts.filter(({ enabled }) => enabled !== false);
        },
    },
    methods: {
        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>