function MainComponent() { const [businesses, setBusinesses] = React.useState([ { id: 1, company: "Apple", status: true, about: "Tech Company", users: 1000, licenseUse: "Full" }, { id: 2, company: "Google", status: false, about: "Search & Tech Company", users: 2000, licenseUse: "Partial" }, { id: 3, company: "Microsoft", status: true, about: "Software & Tech Company", users: 1500, licenseUse: "Full" }, { id: 4, company: "Amazon", status: true, about: "E-commerce & Tech", users: 3000, licenseUse: "Full" }, { id: 5, company: "Facebook", status: false, about: "Social Networking Service", users: 2500, licenseUse: "Partial" }, { id: 6, company: "Tesla", status: true, about: "Automotive & Energy", users: 1200, licenseUse: "Full" }, { id: 7, company: "Berkshire Hathaway", status: false, about: "Conglomerate", users: 600, licenseUse: "Partial" }, { id: 8, company: "Visa", status: true, about: "Financial Services", users: 1800, licenseUse: "Full" }, { id: 9, company: "Johnson & Johnson", status: false, about: "Medical Devices & Pharma", users: 800, licenseUse: "Partial" }, { id: 10, company: "Walmart", status: true, about: "Retail Corporation", users: 5000, licenseUse: "Full" } ]); const [editId, setEditId] = React.useState(null); const [editText, setEditText] = React.useState(""); const deleteBusiness = (id)=>setBusinesses(businesses.filter((business)=>business.id !== id)); const startEdit = (id, about)=>{ setEditId(id); setEditText(about); }; const handleEditChange = (e)=>setEditText(e.target.value); const saveEdit = (id)=>{ const updatedBusinesses = businesses.map((business)=>{ if (business.id === id) { return { ...business, about: editText }; } return business; }); setBusinesses(updatedBusinesses); setEditId(null); }; return /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "table-auto w-full", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "Company"), /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, "Status"), /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, "Users"), /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, "License use"), /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, businesses.map((business)=>/*#__PURE__*/ React.createElement("tr", { key: business.id, __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", __source: { fileName: "", lineNumber: 55, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `https://logo.clearbit.com/${business.company.toLowerCase().replace(/\s/g, '')}.com`, alt: `${business.company} Logo`, className: "w-10 h-10", __source: { fileName: "", lineNumber: 56, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: business.status ? 'text-green-500' : 'text-red-500', __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, business.status ? "Customer" : "Churned"), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, editId === business.id ? /*#__PURE__*/ React.createElement("input", { value: editText, onChange: handleEditChange, onBlur: ()=>saveEdit(business.id), autoFocus: true, __source: { fileName: "", lineNumber: 60, columnNumber: 21 }, __self: this }) : business.about), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `https://source.unsplash.com/random/?professional%20headshot&${business.id}`, alt: "User Headshot", className: "w-10 h-10 rounded-full", __source: { fileName: "", lineNumber: 64, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, business.licenseUse), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>deleteBusiness(business.id), className: "hover:text-red-500", __source: { fileName: "", lineNumber: 66, columnNumber: 19 }, __self: this }, "🗑️")), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>startEdit(business.id, business.about), className: "hover:text-blue-500", __source: { fileName: "", lineNumber: 67, columnNumber: 19 }, __self: this }, "✏️"))))))); }

Status	About	License use
Customer	Tech Company	Full
Churned	Search & Tech Company	Partial
Customer	Software & Tech Company	Full
Customer	E-commerce & Tech	Full
Churned	Social Networking Service	Partial
Customer	Automotive & Energy	Full
Churned	Conglomerate	Partial
Customer	Financial Services	Full
Churned	Medical Devices & Pharma	Partial
Customer	Retail Corporation	Full