function MainComponent() { const sidebarItems = [ "Dashboard", "Profile", "Settings", "Log Out" ]; const [businesses, setBusinesses] = React.useState([ { id: 1, company: "Apple Inc.", status: true, about: "Technology and Software", users: 4, licenseUse: "Heavy", edit: false }, { id: 2, company: "Google LLC", status: false, about: "Search Engine and Advertising", users: 6, licenseUse: "Moderate", edit: false }, { id: 3, company: "Amazon.com, Inc.", status: true, about: "E-commerce and Cloud Computing", users: 8, licenseUse: "Light", edit: false }, { id: 4, company: "Facebook, Inc.", status: false, about: "Social Networking", users: 7, licenseUse: "Heavy", edit: false }, { id: 5, company: "Microsoft Corporation", status: true, about: "Software and Technology", users: 5, licenseUse: "Moderate", edit: false }, { id: 6, company: "Tesla, Inc.", status: true, about: "Automotive and Energy", users: 3, licenseUse: "Heavy", edit: false }, { id: 7, company: "Netflix, Inc.", status: false, about: "Streaming and Entertainment", users: 2, licenseUse: "Light", edit: false }, { id: 8, company: "Airbnb, Inc.", status: true, about: "Hospitality and Rental", users: 9, licenseUse: "Moderate", edit: false }, { id: 9, company: "SpaceX", status: false, about: "Aerospace and Transportation", users: 1, licenseUse: "Heavy", edit: false }, { id: 10, company: "Adobe Inc.", status: true, about: "Software and Digital Media", users: 10, licenseUse: "Light", edit: false } ]); const handleDelete = (id)=>{ setBusinesses((prev)=>prev.filter((business)=>business.id !== id)); }; const toggleEdit = (id)=>{ setBusinesses((businesses)=>businesses.map((business)=>business.id === id ? { ...business, edit: !business.edit } : business)); }; const handleChange = (id, e)=>{ const { name, value } = e.target; setBusinesses((businesses)=>businesses.map((business)=>business.id === id ? { ...business, [name]: value } : business)); }; return /*#__PURE__*/ React.createElement("div", { className: "md:flex h-screen", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "w-full md:w-[250px] h-full bg-[#f3f4f6] flex flex-col", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, sidebarItems.map((item)=>/*#__PURE__*/ React.createElement("a", { href: "#", key: item, className: "block md:inline-block p-4 text-[#333] font-roboto hover:bg-[#e2e5e9] transition-colors duration-200", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, item))), /*#__PURE__*/ React.createElement("main", { className: "flex-1 bg-[#fff] p-8 overflow-auto", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "table-auto w-full", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, "Company"), /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "Status"), /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, "Users"), /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, "License use"), /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, businesses.map((business, index)=>/*#__PURE__*/ React.createElement("tr", { key: business.id, className: "border-b", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", __source: { fileName: "", lineNumber: 59, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `https://logo.clearbit.com/${business.company.toLowerCase().replace(/\s/g, '')}.com`, alt: `${business.company} Logo`, className: "w-8 h-8", __source: { fileName: "", lineNumber: 60, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: `font-roboto ${business.status ? 'text-[#4ade80]' : 'text-[#f87171]'}`, __source: { fileName: "", lineNumber: 61, columnNumber: 17 }, __self: this }, business.status ? 'Customer' : 'Churned'), /*#__PURE__*/ React.createElement("td", { className: "font-roboto", __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }, business.edit ? /*#__PURE__*/ React.createElement("input", { type: "text", value: business.about, name: "about", onChange: (e)=>handleChange(business.id, e), __source: { fileName: "", lineNumber: 62, columnNumber: 62 }, __self: this }) : business.about), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `https://source.unsplash.com/random/?professional%20headshot&${business.id}`, alt: "Professional Headshot", className: "w-8 h-8 rounded-full border border-gray-200", __source: { fileName: "", lineNumber: 63, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "font-roboto", __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this }, business.edit ? /*#__PURE__*/ React.createElement("input", { type: "text", value: business.licenseUse, name: "licenseUse", onChange: (e)=>handleChange(business.id, e), __source: { fileName: "", lineNumber: 64, columnNumber: 62 }, __self: this }) : business.licenseUse), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa${business.edit ? 's' : 'r'} fa-trash-alt hover:cursor-pointer`, onClick: ()=>handleDelete(business.id), __source: { fileName: "", lineNumber: 65, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa${business.edit ? 's' : 'r'} fa-edit hover:cursor-pointer`, onClick: ()=>toggleEdit(business.id), __source: { fileName: "", lineNumber: 66, columnNumber: 21 }, __self: this })))))))); }

Status	About	License use
Customer	Technology and Software	Heavy
Churned	Search Engine and Advertising	Moderate
Customer	E-commerce and Cloud Computing	Light
Churned	Social Networking	Heavy
Customer	Software and Technology	Moderate
Customer	Automotive and Energy	Heavy
Churned	Streaming and Entertainment	Light
Customer	Hospitality and Rental	Moderate
Churned	Aerospace and Transportation	Heavy
Customer	Software and Digital Media	Light