From 85f9457b16d4d686fe2ea81cd64c740416fb4090 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Wed, 10 Jul 2024 15:03:57 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=20card=20=20log?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../03_logs/components/CardComponents.vue     | 95 +++++++++++++++++++
 1 file changed, 95 insertions(+)
 create mode 100644 src/modules/03_logs/components/CardComponents.vue

diff --git a/src/modules/03_logs/components/CardComponents.vue b/src/modules/03_logs/components/CardComponents.vue
new file mode 100644
index 00000000..8792ffeb
--- /dev/null
+++ b/src/modules/03_logs/components/CardComponents.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+defineProps<{
+  index: number;
+  label: string;
+  icon: string;
+}>();
+</script>
+
+<template>
+  <div
+    class="shadow-2 rounded-borders column items-center bg-white q-pa-md"
+    style="min-height: 165px"
+  >
+    <div :class="`avatar-color-${index + 1}`">
+      <q-avatar size="70px" :icon="icon" class="avatar-color" />
+    </div>
+    <div class="q-mt-md text-center text-bold" style="font-size: 16px">
+      {{ label }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.avatar-color {
+  background: rgba(var(--color), 0.3); /* 0.5 คือค่า alpha */
+}
+
+.avatar-color-1 {
+  --color: 226, 181, 138;
+}
+
+.avatar-color-2 {
+  --color: 202, 206, 154;
+}
+
+.avatar-color-3 {
+  --color: 204, 201, 229;
+}
+
+.avatar-color-4 {
+  --color: 201, 232, 246;
+}
+
+.avatar-color-5 {
+  --color: 228, 174, 205;
+}
+
+.avatar-color-6 {
+  --color: 224, 167, 164;
+}
+
+.avatar-color-7 {
+  --color: 234, 197, 204;
+}
+
+.avatar-color-8 {
+  --color: 178, 211, 193;
+}
+
+.avatar-color-9 {
+  --color: 198, 231, 235;
+}
+
+.avatar-color-10 {
+  --color: 190, 157, 228;
+}
+
+.avatar-color-11 {
+  --color: 218, 149, 174;
+}
+
+.avatar-color-12 {
+  --color: 230, 222, 172;
+}
+
+.avatar-color-13 {
+  --color: 147, 223, 178;
+}
+
+.avatar-color-14 {
+  --color: 213, 160, 160;
+}
+
+.avatar-color-15 {
+  --color: 148, 208, 160;
+}
+
+.avatar-color-16 {
+  --color: 126, 211, 208;
+}
+
+.avatar-color-17 {
+  --color: 159, 204, 214;
+}
+</style>