jws-frontend/src/components/StatCardComponent.vue

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

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

<template>
  <div
    class="row full-width"
    style="gap: var(--size-4)"
    :class="{ dark, 'no-wrap': nowrap }"
  >
    <AppBox
      v-for="v in props.branch"
      :key="v.label"
      class="bordered stat-card__wave"
      :class="{ [`stat-card__${v.color}`]: true }"
      style="
        padding: 12px 16px;
        height: 75px;
        min-width: 232px;
        box-shadow: var(--shadow-2);
      "
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 1440 320"
        style="width: 100%"
      >
        <path
          class="box-path"
          d="M0,256L40,245.3C80,235,160,213,240,202.7C320,192,400,192,480,170.7C560,149,640,107,720,106.7C800,107,880,149,960,154.7C1040,160,1120,128,1200,96C1280,64,1360,32,1400,16L1440,0L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"
        ></path>
      </svg>

      <div class="stat-card__content">
        <div class="text-h5 text-weight-bold">{{ v.count }}</div>
        <div class="text-weight-bold text-no-wrap">
          {{ labelI18n ? $t(v.label) : v.label }}
        </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__wave {
  position: relative;
  display: flex;

  & svg {
    width: 200px;
    position: absolute;
    left: 0px;
    bottom: 0;
    opacity: 0.1;

    & .box-path {
      fill: var(--_color);
      fill-opacity: 1;
    }
  }
}

.stat-card__content {
  z-index: 2;
  color: var(--_color);
  height: 100%;
  width: 200px;
}

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

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

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

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

.dark .stat-card__purple {
  --_color: var(--purple-7);
}

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

.dark .stat-card__orange {
  --_color: var(--orange-8);
}
</style>