function EventSearchComponent({ searchTerm, setSearchTerm }) { return /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "Search events...", className: "w-full p-3 rounded-md", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function EventSearchComponentStory() { const [searchTerm, setSearchTerm] = React.useState(""); return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(EventSearchComponent, { searchTerm: searchTerm, setSearchTerm: setSearchTerm, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this })); } function MainComponent() { const [events, setEvents] = React.useState([ { id: 1, name: "Event 1", location: "Location 1", date: "Date 1", imageUrl: "path/to/event-image1.jpg", tickets: [ { id: 101, section: "A", price: 50, sellerContact: "+12345678" }, { id: 102, section: "B", price: 70, sellerContact: "+87654321" } ] }, { id: 2, name: "Event 2", location: "Location 2", date: "Date 2", imageUrl: "path/to/event-image2.jpg", tickets: [ { id: 201, section: "A", price: 55, sellerContact: "+12345679" }, { id: 202, section: "B", price: 75, sellerContact: "+98765432" } ] } ]); const [searchTerm, setSearchTerm] = React.useState(''); const [currentPage, setCurrentPage] = React.useState('home'); const [selectedEvent, setSelectedEvent] = React.useState(null); const [isLoggedIn, setIsLoggedIn] = React.useState(false); const handleEventClick = (event)=>{ setSelectedEvent(event); setCurrentPage('eventDetails'); }; const handleLogin = ()=>setIsLoggedIn(true); const handleLogout = ()=>setIsLoggedIn(false); const filteredEvents = React.useMemo(()=>events.filter((event)=>event.name.toLowerCase().includes(searchTerm.toLowerCase())), [ searchTerm, events ]); return /*#__PURE__*/ React.createElement("div", { className: "bg-[#F0F2F5] min-h-screen font-roboto", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "pt-5 pb-3 px-4 bg-[#1A202C]", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentPage('home'), className: "text-white font-bold text-2xl", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, "TicketResale"), isLoggedIn ? /*#__PURE__*/ React.createElement("button", { onClick: handleLogout, className: "text-white font-semibold", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, "Logout") : /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentPage('login') || isSelectedEvent && setCurrentPage('eventDetails'), className: "text-white font-semibold", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, "Login/Register")), [ 'home', 'eventDetails' ].includes(currentPage) && /*#__PURE__*/ React.createElement(EventSearchComponent, { searchTerm: searchTerm, setSearchTerm: setSearchTerm, __source: { fileName: "", lineNumber: 29, columnNumber: 60 }, __self: this })), currentPage === 'home' && /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-3", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "Top Events"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, filteredEvents.map((event)=>/*#__PURE__*/ React.createElement("button", { key: event.id, onClick: ()=>handleEventClick(event), className: "bg-white shadow-md rounded-md p-4 flex flex-col items-center", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: event.imageUrl, alt: `${event.name} event image`, className: "w-full h-40 object-cover rounded-md", __source: { fileName: "", lineNumber: 38, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mt-2", __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this }, event.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 40, columnNumber: 17 }, __self: this }, `${event.location} & ${event.date}`))))), currentPage === 'eventDetails' && selectedEvent && /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-3", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "Event Tickets"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, selectedEvent.tickets.filter((ticket)=>ticket.section.toLowerCase().includes(searchTerm.toLowerCase()) || ticket.price.toString().includes(searchTerm)).map((ticket)=>/*#__PURE__*/ React.createElement("div", { key: ticket.id, className: "bg-white shadow-md rounded-md p-4 flex flex-col", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }, "Section: ", ticket.section), /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 53, columnNumber: 17 }, __self: this }, "Price: $", ticket.price), isLoggedIn ? /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, "Seller Contact: ", ticket.sellerContact) : /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentPage('login'), className: "w-full p-3 bg-blue-500 text-white rounded-md", __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }, "Login to View Contact"))))), currentPage === 'login' && /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-3", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, "Login"), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "w-full p-3 rounded-md mb-4", type: "text", placeholder: "Username", name: "username", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "w-full p-3 rounded-md mb-4", type: "password", placeholder: "Password", name: "password", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleLogin, className: "w-full p-3 bg-blue-500 text-white rounded-md mb-2", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "Login")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentPage('register'), className: "w-full p-3 bg-green-500 text-white rounded-md", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "Switch to Register")), currentPage === 'register' && /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-3", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, "Register"), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "w-full p-3 rounded-md mb-4", type: "text", placeholder: "Username", name: "username", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "w-full p-3 rounded-md mb-4", type: "email", placeholder: "Email", name: "email", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "w-full p-3 rounded-md mb-4", type: "password", placeholder: "Password", name: "password", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "w-full p-3 rounded-md mb-4", type: "password", placeholder: "Confirm Password", name: "confirmPassword", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full p-3 bg-blue-500 text-white rounded-md mb-2", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, "Register")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentPage('login'), className: "w-full p-3 bg-green-500 text-white rounded-md", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, "Switch to Login")), currentPage === 'buy' && /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-3", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, "Buy Tickets"), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "w-full p-3 rounded-md mb-4", type: "text", placeholder: "Event Name", name: "eventName", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "w-full p-3 rounded-md mb-4", type: "number", placeholder: "Quantity", name: "quantity", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "w-full p-3 rounded-md mb-4", type: "text", placeholder: "Preferred Section", name: "section", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full p-3 bg-blue-500 text-white rounded-md", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, "Contact Seller"))), currentPage === 'sell' && /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-3", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }, "Sell Tickets"), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "w-full p-3 rounded-md mb-4", type: "text", placeholder: "Event Name", name: "eventName", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "w-full p-3 rounded-md mb-4", type: "number", placeholder: "Quantity", name: "quantity", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "w-full p-3 rounded-md mb-4", type: "text", placeholder: "Section", name: "section", __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "w-full p-3 rounded-md mb-4", type: "number", placeholder: "Price per Ticket", name: "price", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-3 rounded-md mb-4", placeholder: "Additional Information", name: "additionalInfo", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full p-3 bg-blue-500 text-white rounded-md", __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }, "Submit"))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-around items-center bg-[#1A202C] py-4 mt-4 fixed bottom-0 w-full", __source: { fileName: "", lineNumber: 110, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentPage('buy'), className: "text-white font-semibold", __source: { fileName: "", lineNumber: 111, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-ticket-alt text-lg mr-2", __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }), "Buy Ticket"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentPage('sell'), className: "text-white font-semibold", __source: { fileName: "", lineNumber: 114, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus text-lg mr-2", __source: { fileName: "", lineNumber: 115, columnNumber: 11 }, __self: this }), "Sell Ticket"))); }