function MainComponent() { const initialBusinesses = [ { id: 1, company: 'Google', status: 'Customer', about: 'Search engine giant', users: 2000, licenseUse: 'Enterprise' }, { id: 2, company: 'Apple', status: 'Churned', about: 'Innovative tech company', users: 1500, licenseUse: 'Standard' }, { id: 3, company: 'Microsoft', status: 'Customer', about: 'Software behemoth', users: 2500, licenseUse: 'Enterprise' }, { id: 4, company: 'Amazon', status: 'Customer', about: 'E-commerce leader', users: 3000, licenseUse: 'Enterprise' }, { id: 5, company: 'Tesla', status: 'Customer', about: 'Electric vehicle pioneer', users: 500, licenseUse: 'Enterprise' }, { id: 6, company: 'Facebook', status: 'Churned', about: 'Social media giant', users: 1000, licenseUse: 'Standard' }, { id: 7, company: 'IBM', status: 'Customer', about: 'Technology and consulting', users: 1200, licenseUse: 'Standard' }, { id: 8, company: 'Intel', status: 'Customer', about: 'Chip manufacturer', users: 1800, licenseUse: 'Enterprise' }, { id: 9, company: 'Oracle', status: 'Churned', about: 'Database management', users: 900, licenseUse: 'Standard' }, { id: 10, company: 'Cisco', status: 'Customer', about: 'Networking hardware', users: 1600, licenseUse: 'Enterprise' } ]; const [businesses, setBusinesses] = React.useState(initialBusinesses); const deleteBusiness = (id)=>{ setBusinesses(businesses.filter((business)=>business.id !== id)); }; const [editingId, setEditingId] = React.useState(null); const handleEdit = (id)=>{ setEditingId(id); }; const handleChange = (id, field, value)=>{ setBusinesses(businesses.map((business)=>business.id === id ? { ...business, [field]: value } : business)); }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4 font-roboto", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full border-collapse", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-[#f8f8f8]", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("th", { className: "p-2 text-left", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "Company"), /*#__PURE__*/ React.createElement("th", { className: "p-2 text-left", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, "Status"), /*#__PURE__*/ React.createElement("th", { className: "p-2 text-left", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("th", { className: "p-2 text-left", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, "Users"), /*#__PURE__*/ React.createElement("th", { className: "p-2 text-left", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "License use"), /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, businesses.map((business)=>{ const isEditing = editingId === business.id; return /*#__PURE__*/ React.createElement("tr", { key: business.id, className: "border-b", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-2 text-center", __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: `select-${business.id}`, className: "form-checkbox", __source: { fileName: "", lineNumber: 56, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "p-2 flex items-center", __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `https://logo.clearbit.com/${business.company.toLowerCase()}.com`, alt: `${business.company} logo`, className: "w-10 h-10 mr-2", __source: { fileName: "", lineNumber: 59, columnNumber: 19 }, __self: this }), isEditing ? /*#__PURE__*/ React.createElement("input", { type: "text", value: business.company, onChange: (e)=>handleChange(business.id, 'company', e.target.value), className: "w-full p-1 border-b", __source: { fileName: "", lineNumber: 64, columnNumber: 21 }, __self: this }) : business.company), /*#__PURE__*/ React.createElement("td", { className: "p-2 text-center", __source: { fileName: "", lineNumber: 74, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: `status-${business.id}`, checked: business.status === 'Customer', onChange: ()=>handleChange(business.id, 'status', business.status === 'Customer' ? 'Churned' : 'Customer'), className: "form-checkbox", __source: { fileName: "", lineNumber: 75, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: `ml-2 ${business.status === 'Customer' ? 'text-green-500' : 'text-red-500'}`, __source: { fileName: "", lineNumber: 79, columnNumber: 19 }, __self: this }, business.status)), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 83, columnNumber: 17 }, __self: this }, isEditing ? /*#__PURE__*/ React.createElement("input", { type: "text", value: business.about, onChange: (e)=>handleChange(business.id, 'about', e.target.value), className: "w-full p-1 border-b", __source: { fileName: "", lineNumber: 85, columnNumber: 21 }, __self: this }) : business.about), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 95, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `https://source.unsplash.com/random/?professional%20headshot&${business.id}`, alt: `Professional headshot for ${business.company}`, className: "w-10 h-10 rounded-full", __source: { fileName: "", lineNumber: 96, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 101, columnNumber: 17 }, __self: this }, isEditing ? /*#__PURE__*/ React.createElement("input", { type: "text", value: business.licenseUse, onChange: (e)=>handleChange(business.id, 'licenseUse', e.target.value), className: "w-full p-1 border-b", __source: { fileName: "", lineNumber: 103, columnNumber: 21 }, __self: this }) : business.licenseUse), /*#__PURE__*/ React.createElement("td", { className: "p-2 text-center", __source: { fileName: "", lineNumber: 113, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-red-500 hover:text-red-800", onClick: ()=>deleteBusiness(business.id), __source: { fileName: "", lineNumber: 114, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 118, columnNumber: 21 }, __self: this }))), /*#__PURE__*/ React.createElement("td", { className: "p-2 text-center", __source: { fileName: "", lineNumber: 121, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-blue-500 hover:text-blue-800", onClick: ()=>handleEdit(business.id), __source: { fileName: "", lineNumber: 122, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-${isEditing ? 'save' : 'edit'}`, __source: { fileName: "", lineNumber: 126, columnNumber: 21 }, __self: this })))); })))); }

Company	Status	About	License use
Google	Customer	Search engine giant	Enterprise
Apple	Churned	Innovative tech company	Standard
Microsoft	Customer	Software behemoth	Enterprise
Amazon	Customer	E-commerce leader	Enterprise
Tesla	Customer	Electric vehicle pioneer	Enterprise
Facebook	Churned	Social media giant	Standard
IBM	Customer	Technology and consulting	Standard
Intel	Customer	Chip manufacturer	Enterprise
Oracle	Churned	Database management	Standard
Cisco	Customer	Networking hardware	Enterprise