From 71f73899ccbd6681815c9fd3f25b33e5e06069f5 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Tue, 2 Apr 2024 17:46:24 +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=E0=B8=9B=E0=B8=B8=E0=B9=88=E0=B8=A1=20=20trigger?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../01_branch-management/BtnAddComponet.vue   | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/components/01_branch-management/BtnAddComponet.vue

diff --git a/src/components/01_branch-management/BtnAddComponet.vue b/src/components/01_branch-management/BtnAddComponet.vue
new file mode 100644
index 00000000..c4f4e699
--- /dev/null
+++ b/src/components/01_branch-management/BtnAddComponet.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+defineProps<{
+  label?: string;
+}>();
+</script>
+
+<template>
+  <div class="column items-center box" :class="{ dark: $q.dark.isActive }">
+    <div class="row">
+      <q-btn
+        @click="$emit('trigger')"
+        size="lg"
+        class="color-btn"
+        icon="mdi-plus"
+        round
+      />
+    </div>
+    <div class="row q-mt-sm color-text">{{ label }}</div>
+  </div>
+</template>
+
+<style scoped>
+.box {
+  --_btn-add-color: var(--cyan-6-hsl);
+
+  .color-btn {
+    color: hsl(var(--_btn-add-color));
+    background: hsla(var(--_btn-add-color) / 0.1) !important;
+  }
+
+  .color-text {
+    color: var(--stone-6);
+  }
+
+  &.dark {
+    --_btn-add-color: var(--cyan-5-hsl);
+  }
+}
+</style>