From ef8fb9c7f34c937850d2ba3b2d51501e58616971 Mon Sep 17 00:00:00 2001
From: Manuel Bustillo <bustikiller@bustikiller.com>
Date: Sun, 11 Aug 2024 19:44:05 +0200
Subject: [PATCH] Add caption to the table

---
 app/dashboard/guests/page.tsx | 1 -
 app/ui/guests/table.tsx       | 7 ++++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/dashboard/guests/page.tsx b/app/dashboard/guests/page.tsx
index 36698c1..f829606 100644
--- a/app/dashboard/guests/page.tsx
+++ b/app/dashboard/guests/page.tsx
@@ -9,7 +9,6 @@ import React, { useState, useEffect } from 'react';
 export default function Page() {
   return (
     <div className="w-full">
-      <h1 className={`${lusitana.className} text-2xl py-4`}>Groups</h1>
       <AffinityGroupsTree />
       
       <h1 className={`${lusitana.className} text-2xl py-4`}>Guests</h1>
diff --git a/app/ui/guests/table.tsx b/app/ui/guests/table.tsx
index 4b0ef60..7cc49d5 100644
--- a/app/ui/guests/table.tsx
+++ b/app/ui/guests/table.tsx
@@ -29,8 +29,13 @@ export default function guestsTable() {
 
   return (
     <div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">
-      <p className="py-3">There are {guests.length} guests in the list</p>
       <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">