tethys.backend/resources/js/Components/CardBoxClient.vue

<script setup>
import { computed } from 'vue';
import { mdiTrendingDown, mdiTrendingUp, mdiTrendingNeutral } from '@mdi/js';
import CardBox from '@/Components/CardBox.vue';
import BaseLevel from '@/Components/BaseLevel.vue';
import PillTag from '@/Components/PillTag.vue';
import UserAvatar from '@/Components/UserAvatar.vue';

const props = defineProps({
    name: {
        type: String,
        required: true,
    },
    login: {
        type: String,
        required: false,
    },
    email: {
        type: String,
        required: false,
    },
    date: {
        type: String,
        required: false,
    },
    progress: {
        type: Number,
        default: 0,
    },
    text: {
        type: String,
        default: null,
    },
    type: {
        type: String,
        default: null,
    },
});

const pillType = computed(() => {
    if (props.type) {
        return props.type;
    }

    if (props.progress) {
        if (props.progress >= 60) {
            return 'success';
        }
        if (props.progress >= 40) {
            return 'warning';
        }

        return 'danger';
    }

    return 'info';
});

const pillIcon = computed(() => {
    return {
        success: mdiTrendingUp,
        warning: mdiTrendingNeutral,
        danger: mdiTrendingDown,
        info: mdiTrendingNeutral,
    }[pillType.value];
});

const pillText = computed(() => props.text ?? `${props.progress}%`);
</script>

<template>
    <CardBox class="mb-6 last:mb-0" hoverable>
        <BaseLevel>
            <BaseLevel type="justify-start">
                <UserAvatar class="w-12 h-12 mr-6" :username="props.name" />
                <div class="text-center md:text-left overflow-hidden">
                    <h4 class="text-xl text-ellipsis">
                        {{ name }}
                    </h4>
                    <p class="text-gray-500 dark:text-slate-400">
                        <!-- {{ date }} @ {{ login }} -->
                        {{ email }}
                    </p>
                </div>
            </BaseLevel>
            <PillTag :type="pillType" :text="pillText" small :icon="pillIcon" />
        </BaseLevel>
    </CardBox>
</template>