fix: เเก้ การเรียกใช้ตัวเเปรสี

src/components/StatCardComponet.vue

@@ -8,7 +8,7 @@ const props = defineProps<{
   }[];
 }>();
 
-const color = ['purple', 'pink', 'yellow', 'green'];
+const color = ['purple', 'pink', 'yellow', 'green', 'blue'];
 </script>
 
 <template>
@@ -22,12 +22,7 @@ const color = ['purple', 'pink', 'yellow', 'green'];
       :key="v.label"
       class="bordered wave col-12"
       :class="`color-${color[i % 5]}`"
-      style="
-        width: 200px;
-        min-width: 150px;
-        max-height: 95px;
-        box-shadow: var(--shadow-2);
-      "
+      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
@@ -36,7 +31,7 @@ const color = ['purple', 'pink', 'yellow', 'green'];
         ></path>
       </svg>
 
-      <div class="column justify-around stat-card-comtent">
+      <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>
@@ -64,13 +59,17 @@ svg {
   fill-opacity: 1;
 }
 
-.stat-card-comtent {
+.stat-card-content {
   z-index: 2;
   color: var(--_color-stat-card);
   height: 100%;
   width: 200px;
 }
 
+.color-blue {
+  --_color-stat-card: var(--blue-5);
+}
+
 .color-purple {
   --_color-stat-card: var(--purple-8);
 }