function MainComponent() { const [mode, setMode] = React.useState('rent'); // 'rent' or 'buy' const [showSettings, setShowSettings] = React.useState(false); const toggleMode = ()=>{ setMode((prevMode)=>prevMode === 'rent' ? 'buy' : 'rent'); }; const swipeLeft = ()=>{ // Logic to skip to next real estate profile (left swipe) }; const swipeRight = ()=>{ // Logic to express interest in the current real estate profile (right swipe) }; const toggleSettings = ()=>{ setShowSettings((prevShowSettings)=>!prevShowSettings); }; const isRentMode = mode === 'rent'; const settingsModal = showSettings ? /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black bg-opacity-50 flex justify-center items-center", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-roboto mb-4", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, "Settings"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-start", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { name: "rentMode", className: `text-lg font-roboto p-2 ${isRentMode ? 'text-blue-500' : 'text-gray-500'}`, onClick: toggleMode, __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, "Rent"), /*#__PURE__*/ React.createElement("button", { name: "buyMode", className: `text-lg font-roboto p-2 ${!isRentMode ? 'text-blue-500' : 'text-gray-500'}`, onClick: toggleMode, __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Buy")), /*#__PURE__*/ React.createElement("button", { name: "closeSettings", className: "mt-4 p-2 bg-red-500 text-white rounded-md", onClick: toggleSettings, __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "Close"))) : null; return /*#__PURE__*/ React.createElement("div", { className: "relative h-screen w-screen bg-gray-100", __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 right-4", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { name: "settings", className: "p-2 bg-white rounded-full shadow-lg text-[#121212] font-roboto", onClick: toggleSettings, __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-cog", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }))), settingsModal, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-full", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center bg-white p-6 rounded-lg shadow-lg w-full max-w-[350px]", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./estate-placeholder.jpg", alt: `Real estate profile ${isRentMode ? 'for rent' : 'for sale'}`, className: "w-full h-[300px] object-cover rounded-lg", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between w-full px-2", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { name: "swipeLeft", onClick: swipeLeft, className: "text-white bg-red-500 h-10 w-10 rounded-full flex items-center justify-center", style: { animation: 'slideOutLeft 0.5s' }, __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-times", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { name: "swipeRight", onClick: swipeRight, className: "text-white bg-green-500 h-10 w-10 rounded-full flex items-center justify-center", style: { animation: 'slideOutRight 0.5s' }, __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-heart", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }, ` @keyframes slideOutLeft { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-100%); opacity: 0; } } @keyframes slideOutRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } } `)); }