function MainComponent() { const [allContactsSelected, setAllContactsSelected] = React.useState(false); const [selectedContacts, setSelectedContacts] = React.useState([]); const toggleSelectAll = ()=>{ setAllContactsSelected(!allContactsSelected); setSelectedContacts(!allContactsSelected ? [ ...Array.from({ length: 10 }).keys() ] : []); }; const handleContactSelect = (index)=>{ setSelectedContacts(selectedContacts.includes(index) ? selectedContacts.filter((contactIndex)=>contactIndex !== index) : [ ...selectedContacts, index ]); }; const contacts = [ ...Array.from({ length: 10 }) ].map((_, index)=>{ return /*#__PURE__*/ React.createElement("li", { key: index, className: "flex justify-between items-center px-4 py-2 border-b border-[#ddd] last:border-b-0", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, "Contact ", index + 1), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-[#666] font-roboto", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "+1234567890", index)), /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: `contact${index}`, onChange: ()=>handleContactSelect(index), checked: allContactsSelected || selectedContacts.includes(index), __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this })); }); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen p-4 bg-[#f7f7f7]", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold text-[#121212] mb-6", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, "Send Invitation Links"), /*#__PURE__*/ React.createElement("button", { type: "button", className: "mb-4 px-4 py-2 bg-[#1a73e8] text-white rounded-md font-medium", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, "Import Phone Contacts"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-2", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "flex items-center text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "selectAll", className: "mr-2", onChange: toggleSelectAll, checked: allContactsSelected, __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }), "Select All Contacts"), /*#__PURE__*/ React.createElement("button", { type: "button", className: "px-4 py-2 bg-[#05c46b] text-white rounded-md font-medium", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "Send Invitations")), /*#__PURE__*/ React.createElement("ul", { className: "overflow-y-auto bg-white border border-[#ddd] rounded-md max-h-[300px]", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, contacts))); }