Extract StateSecondaryInfo component

frontend/components/State/SecondaryInfo.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <span class="secondary-info"><slot /></span>
+</template>
+
+<style lang="postcss">
+.secondary-info {
+  @apply text-black/50;
+}
+</style>

frontend/pages/patrons/index.vue

@@ -33,7 +33,7 @@ const patrons = [
         <tr v-for="(patron, index) in patrons" :key="index">
           <TableTd>
             <div>{{ patron.name }}</div>
-            <div class="secondary-info">{{ patron.email }}</div>
+            <StateSecondaryInfo>{{ patron.email }}</StateSecondaryInfo>
           </TableTd>
 
           <TableTd>
@@ -44,7 +44,9 @@ const patrons = [
 
           <TableTd>
             <div>{{ patron.checkedOut }} books</div>
-            <div class="secondary-info">{{ patron.overdue }} overdue</div>
+            <StateSecondaryInfo>
+              {{ patron.overdue }} overdue
+            </StateSecondaryInfo>
           </TableTd>
 
           <TableTd>
@@ -70,8 +72,4 @@ const patrons = [
 section {
   @apply w-full px-10;
 }
-
-.secondary-info {
-  @apply text-black/50;
-}
 </style>