function MainComponent() { const [data, setData] = React.useState([ { id: 1, selected: false, company: 'Example Inc.', status: 'Customer', about: 'Leading tech firm', users: 3, licenseUse: '25%' }, { id: 2, selected: false, company: 'Startup ABC', status: 'Churned', about: 'Innovative solutions', users: 5, licenseUse: '60%' } ]); const toggleSelect = (id)=>{ const newData = data.map((item)=>item.id === id ? { ...item, selected: !item.selected } : item); setData(newData); }; const toggleStatus = (id)=>{ const newData = data.map((item)=>item.id === id ? { ...item, status: item.status === 'Customer' ? 'Churned' : 'Customer' } : item); setData(newData); }; const deleteUser = (id)=>{ const newData = data.filter((item)=>item.id !== id); setData(newData); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, "Company"), /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "Status"), /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, "Users"), /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, "License use"), /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, data.map((row, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, className: `border-b ${index % 2 === 0 ? 'bg-gray-100' : 'bg-white'}`, __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: row.selected, onChange: ()=>toggleSelect(row.id), __source: { fileName: "", lineNumber: 40, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `https://logo.clearbit.com/${row.company.replace(/ /g, '').toLowerCase()}.com`, alt: `${row.company} Logo`, className: "w-10 h-10", __source: { fileName: "", lineNumber: 41, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `px-2 py-1 text-sm ${row.status === 'Customer' ? 'text-green-600' : 'text-red-600'}`, onClick: ()=>toggleStatus(row.id), __source: { fileName: "", lineNumber: 43, columnNumber: 17 }, __self: this }, row.status)), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, row.about), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `https://source.unsplash.com/random/?professional%20headshot&${row.id}`, className: "w-10 h-10 rounded-full", alt: "User", __source: { fileName: "", lineNumber: 51, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, row.licenseUse), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-red-600 hover:text-red-800", onMouseEnter: (e)=>e.target.classList.replace('text-red-600', 'text-red-800'), onMouseLeave: (e)=>e.target.classList.replace('text-red-800', 'text-red-600'), onClick: ()=>deleteUser(row.id), __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 60, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-blue-600 hover:text-blue-800", onMouseEnter: (e)=>e.target.classList.replace('text-blue-600', 'text-blue-800'), onMouseLeave: (e)=>e.target.classList.replace('text-blue-800', 'text-blue-600'), __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-edit", __source: { fileName: "", lineNumber: 69, columnNumber: 19 }, __self: this })))))))); }

	Company	Status	About	Users	License use
			Leading tech firm		25%
			Innovative solutions		60%

	Company	Status	About	Users	License use
			Leading tech firm		25%
			Innovative solutions		60%