function MainComponent() { const initialCompanies = [ { logo: 'https://logo.clearbit.com/apple.com', name: 'Apple Inc', status: 'Customer', about: 'Technology company', users: [ 1, 2, 3 ], licenseUse: 'Yes' }, { logo: 'https://logo.clearbit.com/microsoft.com', name: 'Microsoft', status: 'Churned', about: 'Software company', users: [ 4, 5 ], licenseUse: 'No' }, { logo: 'https://logo.clearbit.com/amazon.com', name: 'Amazon', status: 'Customer', about: 'E-commerce and Cloud Computing', users: [ 6, 7, 8, 9 ], licenseUse: 'Yes' }, { logo: 'https://logo.clearbit.com/google.com', name: 'Google', status: 'Customer', about: 'Search engine and Advertising', users: [ 10, 11 ], licenseUse: 'Yes' }, { logo: 'https://logo.clearbit.com/facebook.com', name: 'Facebook', status: 'Customer', about: 'Social Media', users: [ 12, 13, 14 ], licenseUse: 'No' }, { logo: 'https://logo.clearbit.com/twitter.com', name: 'Twitter', status: 'Churned', about: 'Microblogging Service', users: [ 15 ], licenseUse: 'No' }, { logo: 'https://logo.clearbit.com/netflix.com', name: 'Netflix', status: 'Customer', about: 'Streaming Service', users: [ 16, 17 ], licenseUse: 'Yes' }, { logo: 'https://logo.clearbit.com/tesla.com', name: 'Tesla', status: 'Customer', about: 'Automotive and Energy', users: [ 18, 19, 20 ], licenseUse: 'Yes' }, { logo: 'https://logo.clearbit.com/adobe.com', name: 'Adobe', status: 'Churned', about: 'Software and Digital Media', users: [ 21, 22 ], licenseUse: 'Yes' }, { logo: 'https://logo.clearbit.com/disney.com', name: 'Disney', status: 'Customer', about: 'Entertainment', users: [ 23, 24, 25, 26 ], licenseUse: 'Yes' } ]; const [companies, setCompanies] = React.useState(initialCompanies); const [isEditing, setIsEditing] = React.useState(null); const [companyData, setCompanyData] = React.useState({ name: '', status: '', about: '', licenseUse: '' }); const handleDelete = (index)=>{ const updatedCompanies = companies.filter((_, i)=>i !== index); setCompanies(updatedCompanies); }; const handleEditClick = (index)=>{ setIsEditing(index); setCompanyData(companies[index]); }; const handleSaveClick = (index)=>{ const updatedCompanies = companies.map((company, i)=>i === index ? companyData : company); setCompanies(updatedCompanies); setIsEditing(null); }; const handleChange = (e)=>{ setCompanyData({ ...companyData, [e.target.name]: e.target.value }); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full p-4", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full bg-white border border-gray-200", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "w-full bg-gray-100 border-b", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 text-left", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "Company"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 text-left", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, "Status"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 text-left", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 text-left", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, "Users"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 text-left", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "License use"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, companies.map((company, index)=>{ const userImages = company.users.map((id)=>/*#__PURE__*/ React.createElement("img", { key: id, src: `https://source.unsplash.com/random/?professional%20headshot&${id}`, alt: `User ${id}`, className: "w-[40px] h-[40px] rounded-full m-1", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this })); const isEditingRow = isEditing === index; return /*#__PURE__*/ React.createElement("tr", { key: index, className: "border-b", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 72, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", __source: { fileName: "", lineNumber: 73, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2 flex items-center", __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: company.logo, alt: `${company.name} logo`, className: "w-[40px] h-[40px] mr-2", __source: { fileName: "", lineNumber: 76, columnNumber: 19 }, __self: this }), isEditingRow ? /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", value: companyData.name, onChange: handleChange, className: "border w-full", __source: { fileName: "", lineNumber: 78, columnNumber: 21 }, __self: this }) : company.name), /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 89, columnNumber: 17 }, __self: this }, isEditingRow ? /*#__PURE__*/ React.createElement("select", { name: "status", value: companyData.status, onChange: handleChange, className: "border", __source: { fileName: "", lineNumber: 91, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "Customer", __source: { fileName: "", lineNumber: 97, columnNumber: 23 }, __self: this }, "Customer"), /*#__PURE__*/ React.createElement("option", { value: "Churned", __source: { fileName: "", lineNumber: 98, columnNumber: 23 }, __self: this }, "Churned")) : /*#__PURE__*/ React.createElement("span", { className: company.status === 'Customer' ? 'text-green-500' : 'text-red-500', __source: { fileName: "", lineNumber: 101, columnNumber: 21 }, __self: this }, company.status)), /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 104, columnNumber: 17 }, __self: this }, isEditingRow ? /*#__PURE__*/ React.createElement("input", { type: "text", name: "about", value: companyData.about, onChange: handleChange, className: "border w-full", __source: { fileName: "", lineNumber: 106, columnNumber: 21 }, __self: this }) : company.about), /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2 flex", __source: { fileName: "", lineNumber: 117, columnNumber: 17 }, __self: this }, userImages), /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 118, columnNumber: 17 }, __self: this }, isEditingRow ? /*#__PURE__*/ React.createElement("select", { name: "licenseUse", value: companyData.licenseUse, onChange: handleChange, className: "border", __source: { fileName: "", lineNumber: 120, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "Yes", __source: { fileName: "", lineNumber: 126, columnNumber: 23 }, __self: this }, "Yes"), /*#__PURE__*/ React.createElement("option", { value: "No", __source: { fileName: "", lineNumber: 127, columnNumber: 23 }, __self: this }, "No")) : company.licenseUse), /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2 text-center", __source: { fileName: "", lineNumber: 133, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDelete(index), className: "text-red-500 hover:text-red-700", __source: { fileName: "", lineNumber: 134, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 135, columnNumber: 21 }, __self: this }))), /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2 text-center", __source: { fileName: "", lineNumber: 138, columnNumber: 17 }, __self: this }, isEditingRow ? /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleSaveClick(index), className: "text-green-500 hover:text-green-700", __source: { fileName: "", lineNumber: 140, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-save", __source: { fileName: "", lineNumber: 141, columnNumber: 23 }, __self: this })) : /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleEditClick(index), className: "text-blue-500 hover:text-blue-700", __source: { fileName: "", lineNumber: 144, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-edit", __source: { fileName: "", lineNumber: 145, columnNumber: 23 }, __self: this })))); })))); }

Company	Status	About	License use
Apple Inc	Customer	Technology company	Yes
Microsoft	Churned	Software company	No
Amazon	Customer	E-commerce and Cloud Computing	Yes
Google	Customer	Search engine and Advertising	Yes
Facebook	Customer	Social Media	No
Twitter	Churned	Microblogging Service	No
Netflix	Customer	Streaming Service	Yes
Tesla	Customer	Automotive and Energy	Yes
Adobe	Churned	Software and Digital Media	Yes
Disney	Customer	Entertainment	Yes