From 433b087b1e80d0206c62825b0be23353b5a7c7f4 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Fri, 19 Apr 2024 13:12:56 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=20badge?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DrawerInfo.vue | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/src/components/DrawerInfo.vue b/src/components/DrawerInfo.vue
index 48881be5..e914cfe0 100644
--- a/src/components/DrawerInfo.vue
+++ b/src/components/DrawerInfo.vue
@@ -5,6 +5,7 @@ defineProps<{
   title: string;
   isEdit?: boolean;
   bgOn?: boolean;
+  statusBranch?: string;
   editData?: (...args: unknown[]) => void;
   deleteData?: (...args: unknown[]) => void;
   submit?: (...args: unknown[]) => void;
@@ -97,6 +98,20 @@ function reset() {
 
           <div class="col text-subtitle1 text-weight-bold text-center">
             {{ title }}
+
+            <text
+              v-if="!!statusBranch"
+              class="branch-badge branch-card__badge"
+              :class="{
+                'branch-card__inactive ': statusBranch === 'INACTIVE',
+              }"
+            >
+              {{
+                statusBranch === 'INACTIVE'
+                  ? $t('statusINACTIVE')
+                  : $t('statusACTIVE')
+              }}
+            </text>
           </div>
 
           <div style="width: 31.98px"></div>
@@ -190,4 +205,22 @@ function reset() {
 .form-footer {
   border-top: 1px solid var(--border-color);
 }
+
+.branch-badge {
+  --_branch-badge-fg: var(--green-8-hsl);
+  --_branch-badge-bg: var(--green-6-hsl);
+
+  &.branch-card__inactive {
+    --_branch-badge-fg: var(--red-4-hsl);
+    --_branch-badge-bg: var(--red-4-hsl);
+  }
+
+  &.branch-card__badge {
+    display: inline-block;
+    border-radius: 999rem;
+    padding-inline: var(--size-2);
+    color: hsl(var(--_branch-badge-fg));
+    background-color: hsla(var(--_branch-badge-bg) / 0.1);
+  }
+}
 </style>