feat: เพิ่ม badge

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>