From 3d9ba89fe8a97affd51624eef55d26d77f8cf307 Mon Sep 17 00:00:00 2001
From: Marley <marleyrae1997@gmail.com>
Date: Thu, 13 Jul 2023 16:35:42 -0700
Subject: [PATCH] Extract StateSecondaryInfo component

---
 frontend/components/State/SecondaryInfo.vue | 13 +++++++++++++
 frontend/pages/patrons/index.vue            | 10 ++++------
 2 files changed, 17 insertions(+), 6 deletions(-)
 create mode 100644 frontend/components/State/SecondaryInfo.vue

diff --git a/frontend/components/State/SecondaryInfo.vue b/frontend/components/State/SecondaryInfo.vue
new file mode 100644
index 0000000..6d07048
--- /dev/null
+++ b/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>
diff --git a/frontend/pages/patrons/index.vue b/frontend/pages/patrons/index.vue
index 4996f1c..5d8ef9a 100644
--- a/frontend/pages/patrons/index.vue
+++ b/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>