Extract .actions to Table

frontend/components/Table/TableTd.vue

@@ -11,7 +11,7 @@ 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;
+  @apply last-of-type:pe-0;
 
   div {
     @apply mt-1;
@@ -19,10 +19,4 @@ td {
     @apply first-of-type:mt-0;
   }
 }
-
-.actions a {
-  @apply me-3;
-
-  @apply last-of-type:me-0;
-}
 </style>

frontend/components/Table/TableTh.vue

@@ -14,10 +14,4 @@ th {
   @apply first-of-type:ps-0;
   @apply last-of-type:ps-3.5 last-of-type:pe-0 last-of-type:relative;
 }
-
-.actions a {
-  @apply me-3;
-
-  @apply last-of-type:me-0;
-}
 </style>

frontend/components/Table/index.vue

@@ -6,8 +6,18 @@
   <table><slot /></table>
 </template>
 
-<style scoped lang="postcss">
+<style lang="postcss">
 table {
   @apply w-full;
 }
+
+.actions {
+  @apply text-end;
+
+  a {
+    @apply me-3;
+
+    @apply last-of-type:me-0;
+  }
+}
 </style>

frontend/pages/patrons/index.vue

@@ -24,7 +24,9 @@ const patrons = [
           <TableTh>Status</TableTh>
           <TableTh>Checked Out</TableTh>
           <TableTh>Fines</TableTh>
-          <TableTh></TableTh>
+          <TableTh actions>
+            <a href="#">Add New</a>
+          </TableTh>
         </tr>
       </TableThead>