app/ui/guests/table.tsx

@@ -7,6 +7,7 @@ import React, { useState, useEffect } from 'react';
 import { Guest } from '@/app/lib/definitions';
 import { getCsrfToken } from '@/app/lib/utils';
 import {classNames} from '@/app/ui/components/button';
+import TableOfContents from '../components/table-of-contents';
 
 export default function guestsTable() {
   const [guests, setGuests] = useState<Array<Guest>>([]);
@@ -50,30 +51,11 @@ export default function guestsTable() {
   guests.length === 0 && loadGuests();
 
   return (
-    <div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">
-      <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-        <caption className="p-5 text-lg font-semibold text-left rtl:text-right text-gray-900 bg-white dark:text-white dark:bg-gray-800">
-          Guests
-          <p className="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">
-            There are {guests.length} guests in the list
-          </p>
-        </caption>
-        <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
-          <tr>
-            <th scope="col" className="px-6 py-3">
-              Name
-            </th>
-            <th scope="col" className="px-6 py-3">
-              Group
-            </th>
-            <th scope="col" className="px-6 py-3">
-              Status
-            </th>
-            <th>Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          {guests.map((guest) => (
+    <TableOfContents
+      headers={['Name', 'Group', 'Status', 'Actions']}
+      caption='Guests'
+      elements={guests}
+      rowRender={(guest) => (
         <tr key={guest.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
           <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
             {guest.name}
@@ -110,9 +92,7 @@ export default function guestsTable() {
             )}
           </td>
         </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
+      )}
+    />
    );
 }