From f91bb46c6bca56ace11b9fe89411bc58fc2b77f4 Mon Sep 17 00:00:00 2001
From: Methapon-Frappet <methapon@frappet.com>
Date: Sat, 13 Apr 2024 16:49:34 +0700
Subject: [PATCH] refactor: stats card

---
 src/components/StatCardComponent.vue | 33 ++++++++++++----------------
 1 file changed, 14 insertions(+), 19 deletions(-)

diff --git a/src/components/StatCardComponent.vue b/src/components/StatCardComponent.vue
index 4f5fb222..df58b974 100644
--- a/src/components/StatCardComponent.vue
+++ b/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>