function MainComponent() { const [isOpen, setIsOpen] = React.useState(false); const members = [ { name: 'Ryan White', relation: 'Me', image: '/profile-ryan.jpg' }, { name: 'Michelle White', relation: 'Spouse', image: '/profile-michelle.jpg' }, { name: 'Madison White', relation: 'Dependant', image: '/profile-madison.jpg' }, { name: 'Erik White', relation: 'Dependant', image: '/profile-erik.jpg' }, { name: 'Joanne White', relation: 'Dependant', image: '/profile-joanne.jpg' }, { name: 'Tyler White', relation: 'Dependant', image: '/profile-tyler.jpg' }, { name: 'Jordan White', relation: 'Dependant', image: '/profile-jordan.jpg' } ]; const toggleModal = ()=>{ setIsOpen(!isOpen); }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("button", { onClick: toggleModal, className: "fixed bottom-0 left-0 right-0 p-4 bg-[#E0E0E0] text-center text-xl font-semibold text-black rounded-t-3xl", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, "Who needs service today?"), isOpen && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex justify-center items-end", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full bg-white rounded-t-3xl p-6 max-w-screen-sm m-4", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl font-roboto", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, "You can manage your members in Settings"), /*#__PURE__*/ React.createElement("button", { onClick: toggleModal, className: "text-2xl font-roboto", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, "×")), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, members.map((member, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center py-2", __source: { fileName: "", lineNumber: 35, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: member.image, alt: `Profile of ${member.name}`, className: "w-12 h-12 rounded-full mr-4", __source: { fileName: "", lineNumber: 36, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 41, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg text-[#121212]", __source: { fileName: "", lineNumber: 42, columnNumber: 21 }, __self: this }, member.name), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-[#757575]", __source: { fileName: "", lineNumber: 43, columnNumber: 21 }, __self: this }, member.relation))))), /*#__PURE__*/ React.createElement("button", { onClick: toggleModal, className: "w-full mt-8 bg-[#E0E0E0] py-4 text-xl font-semibold text-black rounded-full", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "Continue")))); }