Feature Rich Table - Copy this React, Tailwind Component to your project

Fix table <table className="w full table auto"> <thead className="bg gray 50 text xs font semibold uppercase text gray 400"> <tr> {header.map((item, index) => ( <th className="whitespace nowrap p 2" scope="col" key={index}> <div className="text center font semibold">{item}</div> </th> ))} </tr> </thead> <tbody className="divide y divide gray 100 text sm"> {data && data?.length > 0 ? ( data?.map((item, index) => { const { date, time } = convertToUTC7(item?.createdAt) const isTimeOver = new Date(item?.expirationDate) <= new Date() return ( <tr key={index} className={`${isTimeOver ? 'hang qua han' : ''}`}> <td className="whitespace nowrap p 2"> <div className="text center font medium"> {index + 1 + (currentPage 1) * pageSize} </div> </td> <td className="whitespace nowrap p 2"> <div className="text center font medium"> {' '} <span className="inline flex items center gap 1 rounded full bg blue 50 px 2 py 1 text xs font semibold text blue 600"> Gói {item?.category?.key} </span> </div> </td> <td className="whitespace nowrap p 2 "> <div className="flex items center space x 2"> {item?.appointmentExam === 'onlySpeaking' ? ( <p className="rounded bg gray 400 px 2 text white">#Speaking</p> ) : item?.appointmentExam === 'onlyLRW' ? ( <p className="rounded bg rose 600 px 2 text gray 200"> #Listening Reading Writing </p> ) : item?.appointmentExam === 'overall' ? ( <> <p className="rounded bg rose 600 px 2 text gray 200"> #Listening Reading Writing </p> <p className="rounded bg gray 400 px 2 text white">#Speaking</p> </> ) : ( '' )} </div> </td> <td className="whitespace nowrap p 2"> <div className="text center font medium">IELTS Mock Test</div> </td> <td className="whitespace nowrap p 2"> <div className="text center font medium">{item?.timeSlot + ' ' + date}</div> </td> <td className="whitespace nowrap p 2"> <div className="text center font medium">150 phút</div> </td> <td className="whitespace nowrap p 2 text center"> <button disabled={item?.status === 'completed' && isTimeOver} className={`font bold ${ item?.status === 'completed' && !isTimeOver ? 'cursor not allowed text gray 400' : 'cursor pointer text red 600 underline' }`} onClick={() => router.push(`/exam/${item.id}`)} > {item?.status === 'completed' ? 'Đã hoàn thành' : 'Làm bài'} </button> </td> </tr> ) }) ) : ( <tr> <td colSpan={header.length}> <div className="flex min h [300px] items center justify center text center"> <div className="space y 5"> <img loading="lazy" decoding="async" src="/svg/cat.svg" alt="logo cat error" className="h auto w auto" /> <div className="space y 0.5"> <h1 className="text xl font semibold">Vui lòng quay lại sau</h1> <p className="min w 46 text gray 600">Hiện tại bạn chưa có bài thi nào</p> </div> </div> </div> </td> </tr> )} </tbody> </table>