refactor: stats card

src/components/StatCardComponent.vue

@@ -3,7 +3,7 @@ import AppBox from 'components/app/AppBox.vue';
 
 const props = defineProps<{
   branch: {
-    amount: number;
+    count: number;
     label: string;
   }[];
   dark?: boolean;
@@ -22,13 +22,8 @@ const color = ['pink', 'purple'];
       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);
-      "
+      :class="{ [`stat__${color[i % 2]}`]: true }"
+      style="width: 200px; min-width: 150px; box-shadow: var(--shadow-2)"
     >
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
         <path
@@ -37,8 +32,8 @@ const color = ['pink', 'purple'];
         ></path>
       </svg>
 
-      <div class="stat-card-content">
-        <div class="text-h5 text-weight-bold">{{ v.amount }}</div>
+      <div class="stat__content">
+        <div class="text-h5 text-weight-bold">{{ v.count }}</div>
         <div class="text-weight-bold">{{ $t(v.label) }}</div>
       </div>
     </AppBox>
@@ -60,26 +55,26 @@ svg {
 }
 
 .box-path {
-  fill: var(--_color-stat-card);
+  fill: var(--_color);
   fill-opacity: 1;
 }
 
-.stat-card-content {
+.stat__content {
   z-index: 2;
-  color: var(--_color-stat-card);
+  color: var(--_color);
   height: 100%;
   width: 200px;
 }
 
-.color-purple {
-  --_color-stat-card: var(--violet-11);
+.stat__purple {
+  --_color: var(--violet-11);
 }
 
-.color-pink {
-  --_color-stat-card: var(--pink-6);
+.stat__pink {
+  --_color: var(--pink-6);
 }
 
-.dark .color-purple {
-  --_color-stat-card: var(--purple-8);
+.dark .stat__purple {
+  --_color: var(--purple-8);
 }
 </style>