jws-frontend/src/components/StatCardComponent.vue

<script setup lang="ts">
import { Icon } from '@iconify/vue/dist/iconify.js';

const props = withDefaults(
  defineProps<{
    branch: {
      hidden?: boolean;
      icon: string;
      count: number;
      label: string;
      color:
        | 'pink'
        | 'purple'
        | 'green'
        | 'orange'
        | 'dark-orange'
        | 'cyan'
        | 'yellow'
        | 'light-yellow'
        | 'red'
        | 'magenta'
        | 'blue'
        | 'lime'
        | 'light-purple'
        | 'light-green'
        | 'gray';
    }[];
    dark?: boolean;
    textSize?: string;
    labelI18n?: boolean;
  }>(),
  {
    labelI18n: false,
    textSize: '12px',
  },
);
</script>

<template>
  <div class="row no-wrap" style="gap: var(--size-4)" :class="{ dark }">
    <div
      v-for="v in branch.filter((v) => !v.hidden)"
      class="no-padding stat-card"
      :class="{ [`stat-card__${v.color}`]: true }"
      :key="v.label"
    >
      <div class="stat-card__content row items-center q-pa-sm">
        <div class="col-4 text-center">
          <q-avatar size="lg" style="background-color: hsla(0 0% 100% /0.2)">
            <Icon :icon="v.icon" width="24px" />
          </q-avatar>
        </div>
        <div class="col-6 justify-center column">
          <div
            class="col-6 ellipsis text-bold text-caption"
            style="width: 100%"
          >
            <span :style="`font-size: ${textSize}`">
              {{ labelI18n ? $t(v.label) : v.label }}
            </span>
            <q-tooltip
              anchor="top middle"
              self="bottom middle"
              :offset="[10, 10]"
            >
              {{ labelI18n ? $t(v.label) : v.label }}
            </q-tooltip>
          </div>

          <div class="col-6">{{ v.count }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.stat-card {
  border-radius: var(--radius-2);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}

.stat-card__content {
  z-index: 2;
  color: hsla(var(--gray-0-hsl) / 1);
  background: hsla(var(--_color) / 1);
  height: 100%;
  min-width: 200px;
}

.stat-card__purple {
  --_color: var(--violet-11-hsl);
}

.stat-card__pink {
  --_color: var(--pink-6-hsl);
}

.stat-card__green {
  --_color: var(--teal-10-hsl);
}

.stat-card__cyan {
  --_color: var(--cyan-7-hsl);
}

.stat-card__red {
  --_color: var(--red-6-hsl);
}

.stat-card__yellow {
  --_color: var(--orange-4-hsl);
}

.stat-card__light-yellow {
  --_color: var(--yellow-6-hsl);
}

.stat-card__orange {
  --_color: var(--orange-5-hsl);
}

.stat-card__dark-orange {
  --_color: var(--orange-10-hsl);
}

.stat-card__magenta {
  --_color: var(--pink-8-hsl);
}

.stat-card__lime {
  --_color: var(--jungle-8-hsl);
}

.stat-card__light-green {
  --_color: var(--green-8-hsl);
}

.stat-card__light-purple {
  --_color: var(--purple-7-hsl);
}

.stat-card__blue {
  --_color: var(--blue-6-hsl);
}

.stat-card__gray {
  --_color: var(--gray-6-hsl);
}

.dark .stat-card__purple {
  --_color: var(--violet-10-hsl);
}

.dark .stat-card__green {
  --_color: var(--teal-8-hsl);
}

.dark .stat-card__orange {
  --_color: var(--orange-6-hsl);
}

.dark.stat-card__dark-orange {
  --_color: var(--orange-11-hsl);
}

.dark .stat-card__magenta {
  --_color: var(--pink-7-hsl);
}

.dark .stat-card__blue {
  --_color: var(--blue-10-hsl);
}
</style>