jws-frontend/src/components/StatCardComponent.vue

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

const props = withDefaults(
  defineProps<{
    branch: {
      icon: string;
      count: number;
      label: string;
      color: 'pink' | 'purple' | 'green' | 'orange';
    }[];
    dark?: boolean;
    labelI18n?: boolean;
    nowrap?: boolean;
  }>(),
  {
    labelI18n: false,
  },
);
</script>

<template>
  <div
    class="row"
    style="gap: var(--size-4)"
    :class="{ dark, 'no-wrap': nowrap }"
  >
    <AppBox
      v-for="v in props.branch"
      class="no-padding shadow-2"
      :class="{ [`stat-card__${v.color}`]: true }"
      :key="v.label"
    >
      <div class="stat-card__content row items-center q-px-md q-py-sm">
        <div class="col-4 text-center">
          <q-avatar
            size="lg"
            style="background-color: hsla(0 0% 100% /0.15)"
            text-color="white"
            :icon="v.icon"
          />
        </div>
        <div class="col-6 justify-center column">
          <div class="col-6 ellipsis text-bold" style="width: 100%">
            {{ labelI18n ? $t(v.label) : v.label }}
            <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>
    </AppBox>
  </div>
</template>

<style scoped>
.stat-card {
  --_color: var(--gray-6);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

@media screen and (min-width: 1024px) {
  .stat-card {
    display: flex;
  }
}

@media screen and (min-width: 1920px) {
  .stat-card {
    display: flex;
  }
}

.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__orange {
  --_color: var(--orange-5-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-8);
}
</style>