Extract badge component

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>

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>

frontend/pages/patrons/index.vue

@@ -37,10 +37,9 @@ const patrons = [
           </TableTd>
 
           <TableTd>
-            <span class="badge" :class="{
+            <Badge :state="patron.status === 'Active' ? 'good' : 'bad'">
-              'badge-good': patron.status === 'Active',
+              {{ patron.status }}
-              'badge-bad': patron.status === 'Overdue',
+            </Badge>
-            }">{{ patron.status }}</span>
           </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;
 }