Extract table to component

frontend/.idea/inspectionProfiles/Project_Default.xml

@@ -2,6 +2,24 @@
   <profile version="1.0">
     <option name="myName" value="Project Default" />
     <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myValues">
+        <value>
+          <list size="9">
+            <item index="0" class="java.lang.String" itemvalue="nobr" />
+            <item index="1" class="java.lang.String" itemvalue="noembed" />
+            <item index="2" class="java.lang.String" itemvalue="comment" />
+            <item index="3" class="java.lang.String" itemvalue="noscript" />
+            <item index="4" class="java.lang.String" itemvalue="embed" />
+            <item index="5" class="java.lang.String" itemvalue="script" />
+            <item index="6" class="java.lang.String" itemvalue="tablethead" />
+            <item index="7" class="java.lang.String" itemvalue="tableth" />
+            <item index="8" class="java.lang.String" itemvalue="tabletbody" />
+          </list>
+        </value>
+      </option>
+      <option name="myCustomValuesEnabled" value="true" />
+    </inspection_tool>
     <inspection_tool class="RequiredAttributes" enabled="true" level="WARNING" enabled_by_default="true">
       <option name="myAdditionalRequiredHtmlAttributes" value="model-value" />
     </inspection_tool>

frontend/components/Table/Tbody.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <tbody><slot /></tbody>
+</template>
+
+<style lang="postcss">
+tbody {
+  @apply divide-y divide-pink-400/40;
+}
+</style>

frontend/components/Table/Td.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <td><slot /></td>
+</template>
+
+<style lang="postcss">
+td {
+  @apply py-5 px-3 whitespace-nowrap;
+
+  @apply first-of-type:ps-0;
+  @apply last-of-type:pe-0 last-of-type:text-end;
+
+  div {
+    @apply mt-1;
+
+    @apply first-of-type:mt-0;
+  }
+}
+</style>

frontend/components/Table/Th.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <th><slot /></th>
+</template>
+
+<style lang="postcss">
+th {
+  @apply py-3.5 px-3;
+  @apply font-bold text-left;
+
+  @apply first-of-type:ps-0;
+  @apply last-of-type:ps-3.5 last-of-type:pe-0 last-of-type:relative;
+}
+</style>

frontend/components/Table/Thead.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <thead><slot /></thead>
+</template>
+
+<style lang="postcss">
+thead {
+  @apply border-b border-pink-400/80;
+}
+</style>

frontend/components/Table/index.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <table><slot /></table>
+</template>
+
+<style scoped lang="postcss">
+table {
+  @apply w-full;
+}
+</style>

frontend/pages/patrons/index.vue

@@ -16,52 +16,52 @@ const patrons = [
 
 <template>
   <section>
-    <table>
+    <Table>
 
-      <thead>
+      <TableThead>
         <tr>
-          <th>Name</th>
+          <TableTh>Name</TableTh>
-          <th>Status</th>
+          <TableTh>Status</TableTh>
-          <th>Checked Out</th>
+          <TableTh>Checked Out</TableTh>
-          <th>Fines</th>
+          <TableTh>Fines</TableTh>
-          <th></th>
+          <TableTh></TableTh>
         </tr>
-      </thead>
+      </TableThead>
 
-      <tbody>
+      <TableTbody>
 
         <tr v-for="(patron, index) in patrons" :key="index">
-          <td>
+          <TableTd>
             <div>{{ patron.name }}</div>
             <div class="secondary-info">{{ patron.email }}</div>
-          </td>
+          </TableTd>
 
-          <td>
+          <TableTd>
             <span class="badge" :class="{
               'badge-good': patron.status === 'Active',
               'badge-bad': patron.status === 'Overdue',
             }">{{ patron.status }}</span>
-          </td>
+          </TableTd>
 
-          <td>
+          <TableTd>
             <div>{{ patron.checkedOut }} books</div>
             <div class="secondary-info">{{ patron.overdue }} overdue</div>
-          </td>
+          </TableTd>
 
-          <td>
+          <TableTd>
             <div>${{ patron.fines }}</div>
-          </td>
+          </TableTd>
 
-          <td class="actions">
+          <TableTd class="actions">
             <a href="#">Check Out</a>
             <a href="#">View</a>
             <a href="#">Edit</a>
-          </td>
+          </TableTd>
         </tr>
 
-      </tbody>
+      </TableTbody>
 
-    </table>
+    </Table>
   </section>
 </template>
 
@@ -72,39 +72,6 @@ section {
   @apply w-full px-10;
 }
 
-table {
-  @apply w-full;
-}
-
-thead {
-  @apply border-b border-pink-400/80;
-}
-
-th {
-  @apply py-3.5 px-3;
-  @apply font-bold text-left;
-
-  @apply first-of-type:ps-0;
-  @apply last-of-type:ps-3.5 last-of-type:pe-0 last-of-type:relative;
-}
-
-tbody {
-  @apply divide-y divide-pink-400/40;
-}
-
-td {
-  @apply py-5 px-3 whitespace-nowrap;
-
-  @apply first-of-type:ps-0;
-  @apply last-of-type:pe-0 last-of-type:text-end;
-
-  div {
-    @apply mt-1;
-
-    @apply first-of-type:mt-0;
-  }
-}
-
 .badge {
   @apply py-1 px-2 rounded-md inline-flex items-center;
   @apply ring-1 ring-inset;