From 2f3ede5dd51d91cc531f1e2011deb1470a2c352e Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Wed, 3 Apr 2024 17:57:54 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E0=B8=AA=E0=B8=A3=E0=B9=89=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=87=20=20stat=20card=20componet?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/StatCardComponet.vue | 86 +++++++++++++++++++++++++++++
 1 file changed, 86 insertions(+)
 create mode 100644 src/components/StatCardComponet.vue

diff --git a/src/components/StatCardComponet.vue b/src/components/StatCardComponet.vue
new file mode 100644
index 00000000..e69a943a
--- /dev/null
+++ b/src/components/StatCardComponet.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import AppBox from 'components/app/AppBox.vue';
+
+const props = defineProps<{
+  branch: {
+    amount: string;
+    label: string;
+  }[];
+}>();
+
+const color = ['purple', 'pink', 'yellow', 'green'];
+</script>
+
+<template>
+  <div class="row" :class="{ 'justify-center': $q.screen.lt.md }">
+    <app-box
+      v-for="(v, i) in props.branch"
+      :key="v.label"
+      class="bordered wave col-12 q-ma-sm"
+      :class="`color-${color[i % 5]}`"
+      style="
+        width: 200px;
+        min-width: 150px;
+        box-shadow:
+          0px 5px 5px 0 rgba(0, 0, 0, 0.2),
+          0px 5px 5px 0 rgba(0, 0, 0, 0.19);
+      "
+    >
+      <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-comtent">
+        <div class="col-4 text-h5 text-weight-bold">{{ v.amount }}</div>
+        <div class="text-weight-bold">{{ v.label }}</div>
+      </div>
+    </app-box>
+  </div>
+</template>
+
+<style scoped>
+.wave {
+  background: #ffffff;
+  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-comtent {
+  z-index: 2;
+  color: var(--_color-stat-card);
+  height: 100%;
+  width: 200px;
+}
+
+.color-purple {
+  --_color-stat-card: var(--purple-8);
+}
+
+.color-pink {
+  --_color-stat-card: var(--pink-8);
+}
+
+.color-yellow {
+  --_color-stat-card: var(--yellow-8);
+}
+
+.color-green {
+  --_color-stat-card: var(--green-8);
+}
+</style>