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>