From fab3d28548e9645b11f27ee951a633c24aed2568 Mon Sep 17 00:00:00 2001
From: Marley <marleyrae1997@gmail.com>
Date: Thu, 13 Jul 2023 14:50:52 -0700
Subject: [PATCH] Extract badge component

---
 .../inspectionProfiles/Project_Default.xml    |  1 +
 frontend/components/Badge.vue                 | 22 +++++++++++++++++++
 frontend/pages/patrons/index.vue              | 20 +++--------------
 3 files changed, 26 insertions(+), 17 deletions(-)
 create mode 100644 frontend/components/Badge.vue

diff --git a/frontend/.idea/inspectionProfiles/Project_Default.xml b/frontend/.idea/inspectionProfiles/Project_Default.xml
index 04fdf96..44480f4 100644
--- a/frontend/.idea/inspectionProfiles/Project_Default.xml
+++ b/frontend/.idea/inspectionProfiles/Project_Default.xml
@@ -28,5 +28,6 @@
       <option name="processLiterals" value="true" />
       <option name="processComments" value="true" />
     </inspection_tool>
+    <inspection_tool class="VueMissingComponentImportInspection" enabled="false" level="WARNING" enabled_by_default="false" />
   </profile>
 </component>
\ No newline at end of file
diff --git a/frontend/components/Badge.vue b/frontend/components/Badge.vue
new file mode 100644
index 0000000..90482b5
--- /dev/null
+++ b/frontend/components/Badge.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+defineProps<{state: string}>()
+</script>
+
+<template>
+  <span class="badge" :class="`badge-${state}`"><slot /></span>
+</template>
+
+<style lang="postcss">
+.badge {
+  @apply py-1 px-2 rounded-md inline-flex items-center;
+  @apply ring-1 ring-inset;
+
+  &-good {
+    @apply ring-pink-600 text-pink-600 bg-pink-200/50;
+  }
+
+  &-bad {
+    @apply ring-sky-600 text-sky-600 bg-sky-200/50;
+  }
+}
+</style>
diff --git a/frontend/pages/patrons/index.vue b/frontend/pages/patrons/index.vue
index a9f52df..5cd7b7f 100644
--- a/frontend/pages/patrons/index.vue
+++ b/frontend/pages/patrons/index.vue
@@ -37,10 +37,9 @@ const patrons = [
           </TableTd>
 
           <TableTd>
-            <span class="badge" :class="{
-              'badge-good': patron.status === 'Active',
-              'badge-bad': patron.status === 'Overdue',
-            }">{{ patron.status }}</span>
+            <Badge :state="patron.status === 'Active' ? 'good' : 'bad'">
+              {{ patron.status }}
+            </Badge>
           </TableTd>
 
           <TableTd>
@@ -72,19 +71,6 @@ section {
   @apply w-full px-10;
 }
 
-.badge {
-  @apply py-1 px-2 rounded-md inline-flex items-center;
-  @apply ring-1 ring-inset;
-
-  &-good {
-    @apply ring-pink-600 text-pink-600 bg-pink-200/50;
-  }
-
-  &-bad {
-    @apply ring-sky-600 text-sky-600 bg-sky-200/50;
-  }
-}
-
 .secondary-info {
   @apply text-black/50;
 }