function MainComponent() { const [currentEvent, setCurrentEvent] = React.useState(0); const [favorites, setFavorites] = React.useState([]); const events = [ { title: "Concert Night", description: "Live music event featuring local bands. May 1, 7 PM at The Arena.", image: "/events/concert-night.jpg" }, { title: "Art Gallery Opening", description: "Explore contemporary art pieces. May 5, 6 PM at Modern Art Gallery.", image: "/events/art-gallery.jpg" }, { title: "Food Festival", description: "Taste dishes from the best food trucks. May 12, 1 PM at Central Park.", image: "/events/food-festival.jpg" } ]; const handleLikeDislike = (action)=>{ document.getElementById(`event-${currentEvent}`).classList.add("event-exit"); setTimeout(()=>{ if (action === 'like') { setFavorites([ ...favorites, events[currentEvent] ]); } setCurrentEvent((prevState)=>(prevState + 1) % events.length); }, 300); }; const createGroup = ()=>{ // Function to handle group creation and invitation logic }; const handlePayment = ()=>{ // Function to handle individual payment processes for each participant }; const currentEventData = events[currentEvent]; const openWhatsApp = ()=>{ // Logic to integrate with WhatsApp or other messaging platforms }; const renderEventSection = ()=>/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { id: `event-${currentEvent}`, className: "absolute inset-0 event-enter", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute left-0 right-0 mx-auto transform -translate-y-1/2 w-[200px] h-[200px] bg-cover bg-center rounded-full shadow-lg", style: { backgroundImage: `url(${currentEventData.image})`, border: '5px solid white' }, __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-[225px]", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-center text-gray-800 font-roboto", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, currentEventData.title), /*#__PURE__*/ React.createElement("p", { className: "mt-3 text-center text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, currentEventData.description), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-8", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { name: "dislike", onClick: ()=>handleLikeDislike('dislike'), className: "flex items-center justify-center w-12 h-12 text-red-500 transition-transform duration-300 ease-in-out border-2 border-red-500 rounded-full hover:scale-110 focus:outline-none", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "😞"), /*#__PURE__*/ React.createElement("button", { name: "like", onClick: ()=>handleLikeDislike('like'), className: "flex items-center justify-center w-12 h-12 text-green-500 transition-transform duration-300 ease-in-out border-2 border-green-500 rounded-full hover:scale-110 focus:outline-none", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "😍")))), /*#__PURE__*/ React.createElement("button", { onClick: createGroup, className: "mt-5 px-4 py-2 text-white bg-blue-500 rounded-lg font-roboto", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, "Create Group"), /*#__PURE__*/ React.createElement("button", { onClick: openWhatsApp, className: "mt-2 px-4 py-2 text-white bg-green-500 rounded-lg font-roboto", __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, "Invite via WhatsApp"), /*#__PURE__*/ React.createElement("button", { onClick: handlePayment, className: "mt-2 px-4 py-2 text-white bg-purple-500 rounded-lg font-roboto", __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, "Proceed to Payment")); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gradient-to-r from-[#ff758c] via-[#ff7eb3] to-[#ff85a2]", __source: { fileName: "", lineNumber: 87, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "mb-5 text-4xl font-bold text-white font-roboto", __source: { fileName: "", lineNumber: 88, columnNumber: 7 }, __self: this }, "Event Swiper"), /*#__PURE__*/ React.createElement("div", { className: "relative w-full max-w-md px-4 py-8 bg-white rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }, renderEventSection()), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this }, ` @keyframes slideIn { 0% { transform: translateX(100%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } @keyframes slideOut { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-100%); opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .event-enter { animation: slideIn 0.3s forwards; } .event-exit { animation: fadeOut 0.3s forwards; } `)); }