Styled Table Container - Copy this React, Mui Component to your project

i-want-to-have-page-for-clients-page-a-header-says-clients-and-it-will-have-tooltip-for-some-explantion-when-it-ishover-on-and-table-the-table-will-have-client-image,-name,email,phoneNumber,alternativephoneNumber,-address,-gender,-dob,-status(status-will-be-toggle-button-so-we-can-activate-or-deactivate-user-account-),-postedJobs(a-clickable-button-so-we-can-see-what-jobs-posted-by-the-user-on-modal-),-appliedJobs(a-clickable-button-so-we-can-see-what-are-the-applications-it-recived-).-when-i-click-on-image-i-want-to-preview-the-wholw-image-on-screen,-global-search-for-name-,-address-and-phone-number.-filter-for-geneder-dropdown-use-these-color-when-u-want-to-use-color-#CE257A,-my-old-code-is-/*-eslint-disable-no-unused-vars-*/-import-React,-{-useContext,-useEffect-}-from-"react";-import-{-AdminContext-}-from-"../../context/AdminContext";-const-Clients-=-()-=>-{-const-{-clients,-getAllClients,-toggleClientStatus-}-=-useContext(AdminContext);-useEffect(()-=>-{-getAllClients();-console.log(clients);-},-[]);-return-(-<div-className="overflow-x-auto-p-4">-<table-className="min-w-full-bg-white-border-border-gray-200-rounded-lg-shadow-md">-<thead>-<tr>-<th-className="p-4-border-b-font-semibold-text-gray-700">Name</th>-<th-className="p-4-border-b-font-semibold-text-gray-700">-Address-</th>-<th-className="p-4-border-b-font-semibold-text-gray-700">Email</th>-<th-className="p-4-border-b-font-semibold-text-gray-700">Phone</th>-<th-className="p-4-border-b-font-semibold-text-gray-700">Gender</th>-<th-className="p-4-border-b-font-semibold-text-gray-700">Status</th>-</tr>-</thead>-<tbody>-{clients.map((client)-=>-(-<tr-key={client._id}-className="text-center-hover:bg-gray-50">-<td-className="p-4-border-b">{client.name}</td>-<td-className="p-4-border-b">-{client.address.line1-||-client.address.line2-||-"N/A"}-</td>-<td-className="p-4-border-b">{client.email}</td>-<td-className="p-4-border-b">{client.phoneNumber}</td>-<td-className="p-4-border-b">{client.gender}</td>-<td-className="p-4-border-b">-<button-onClick={()-=>-toggleClientStatus(client._id)}-className={`px-4-py-2-rounded-text-white-${-client.status-===-"deactivated"-?-"bg-green-500-hover:bg-green-600"-:-"bg-red-500-hover:bg-red-600"-}`}->-{client.status-===-"deactivated"-?-"Activate"-:-"Deactivate"}-</button>-</td>-</tr>-))}-</tbody>-</table>-</div>-);-};-export-default-Clients;