function MainComponent() { const [companies, setCompanies] = React.useState([ { name: 'Walmart', status: 'Customer', about: 'Retail corporation', license: 75, id: 1 }, { name: 'Amazon', status: 'Churned', about: 'E-commerce, cloud computing', license: 60, id: 2 }, { name: 'Apple', status: 'Customer', about: 'Technology company', license: 90, id: 3 }, { name: 'CVS Health', status: 'Customer', about: 'Healthcare', license: 55, id: 4 }, { name: 'UnitedHealth Group', status: 'Churned', about: 'Healthcare', license: 65, id: 5 }, { name: 'Exxon Mobil', status: 'Customer', about: 'Oil and gas', license: 45, id: 6 }, { name: 'Berkshire Hathaway', status: 'Customer', about: 'Holding company', license: 70, id: 7 }, { name: 'Alphabet', status: 'Churned', about: 'Technology conglomerate', license: 80, id: 8 }, { name: 'McKesson', status: 'Customer', about: 'Pharmaceuticals', license: 50, id: 9 }, { name: 'AmerisourceBergen', status: 'Customer', about: 'Pharmaceuticals', license: 85, id: 10 } ]); const handleDelete = (id)=>{ const updatedCompanies = companies.filter((company)=>company.id !== id); setCompanies(updatedCompanies); }; const handleEdit = (id)=>{ // Logic to edit the specific row content }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full bg-white", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "bg-gray-200", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "Company"), /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, "Status"), /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, "Users"), /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, "License use"), /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, companies.map((company)=>{ const statusClass = company.status === 'Customer' ? 'text-green-500' : 'text-red-500'; const imgUrl = `https://logo.clearbit.com/${company.name.toLowerCase().replace(' ', '')}.com`; const avatarUrl = `https://source.unsplash.com/random/?professional%20headshot&${company.id}`; return /*#__PURE__*/ React.createElement("tr", { key: company.id, __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: `checkbox-${company.id}`, className: "form-checkbox", __source: { fileName: "", lineNumber: 48, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2 flex items-center", __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imgUrl, alt: `${company.name} logo`, className: "w-10 h-10 rounded-full mr-3", __source: { fileName: "", lineNumber: 51, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 52, columnNumber: 19 }, __self: this }, company.name)), /*#__PURE__*/ React.createElement("td", { className: `border px-4 py-2 ${statusClass}`, __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, company.status), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, company.about), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `${avatarUrl}&1`, alt: "Professional headshot 1", className: "w-10 h-10 rounded-full mr-2 inline-block", __source: { fileName: "", lineNumber: 57, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: `${avatarUrl}&2`, alt: "Professional headshot 2", className: "w-10 h-10 rounded-full mr-2 inline-block", __source: { fileName: "", lineNumber: 58, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative pt-1", __source: { fileName: "", lineNumber: 61, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "overflow-hidden h-2 mb-4 text-xs flex rounded bg-pink-200", __source: { fileName: "", lineNumber: 62, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { width: `${company.license}%` }, className: "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-pink-500", __source: { fileName: "", lineNumber: 63, columnNumber: 23 }, __self: this })))), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 67, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { onClick: ()=>handleDelete(company.id), className: "fas fa-trash cursor-pointer hover:text-red-500", name: `delete-${company.id}`, __source: { fileName: "", lineNumber: 68, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { onClick: ()=>handleEdit(company.id), className: "fas fa-edit cursor-pointer hover:text-blue-500", name: `edit-${company.id}`, __source: { fileName: "", lineNumber: 71, columnNumber: 19 }, __self: this }))); })))); }

Company	Status	About
Walmart	Customer	Retail corporation
Amazon	Churned	E-commerce, cloud computing
Apple	Customer	Technology company
CVS Health	Customer	Healthcare
UnitedHealth Group	Churned	Healthcare
Exxon Mobil	Customer	Oil and gas
Berkshire Hathaway	Customer	Holding company
Alphabet	Churned	Technology conglomerate
McKesson	Customer	Pharmaceuticals
AmerisourceBergen	Customer	Pharmaceuticals