jws-frontend/src/components/StatCardComponent.vue

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

const props = defineProps<{
  branch: {
    amount: number;
    label: string;
  }[];
}>();

const color = ['pink', 'purple'];
</script>

<template>
  <div
    class="row"
    style="gap: var(--size-4)"
    :class="{ 'justify-between': $q.screen.lt.md }"
  >
    <AppBox
      v-for="(v, i) in props.branch"
      :key="v.label"
      class="bordered wave col-12"
      :class="`color-${color[i % 2]}`"
      style="
        width: 200px;
        min-width: 150px;
        max-height: 95px;
        box-shadow: var(--shadow-2);
      "
    >
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
        <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="column justify-around stat-card-content">
        <div class="col-4 text-h5 text-weight-bold">{{ v.amount }}</div>
        <div class="text-weight-bold">{{ v.label }}</div>
      </div>
    </AppBox>
  </div>
</template>

<style scoped>
.wave {
  position: relative;
  display: flex;
}

svg {
  width: 200px;
  position: absolute;
  left: 0px;
  top: 50px;
  opacity: 0.1;
}

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

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

.color-purple {
  --_color-stat-card: var(--violet-11);
}

.color-pink {
  --_color-stat-card: var(--pink-6);
}
</style>