function MainComponent() { const [activeTab, setActiveTab] = React.useState('home'); const [message, setMessage] = React.useState(''); const [chatMessages, setChatMessages] = React.useState([ { user: 'DJ_Fan123', text: "Can't wait for the next show!" }, { user: 'MusicLover22', text: "That new track preview is fire 🔥" } ]); const handleMessageSubmit = (e)=>{ e.preventDefault(); if (message.trim()) { setChatMessages([ ...chatMessages, { user: 'You', text: message } ]); setMessage(''); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-purple-600 to-pink-500 text-white font-sans", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "py-4 px-4 md:px-8 flex justify-between items-center", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, "DJ Afrodite"), /*#__PURE__*/ React.createElement("button", { className: "bg-white bg-opacity-20 p-2 rounded-full", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto px-4 md:px-8 pb-20", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, activeTab === 'home' && /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "Exclusive Content"), /*#__PURE__*/ React.createElement("div", { className: "bg-white bg-opacity-20 p-4 rounded-lg mb-4", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-medium mb-2", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, "New Track Preview"), /*#__PURE__*/ React.createElement("audio", { controls: true, className: "w-full", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: "/preview.mp3", type: "audio/mpeg", __source: { fileName: "", lineNumber: 33, columnNumber: 17 }, __self: this }), "Your browser does not support the audio element.")), /*#__PURE__*/ React.createElement("div", { className: "bg-white bg-opacity-20 p-4 rounded-lg", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-medium mb-2", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, "Behind the Scenes"), /*#__PURE__*/ React.createElement("img", { src: "/backstage.jpg", alt: "DJ Afrodite mixing tracks in her professional studio setup", className: "w-full rounded-md mb-2", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, "Check out my latest studio session!"))), activeTab === 'playlists' && /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, "Playlists"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-4", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "bg-white bg-opacity-20 p-4 rounded-lg flex items-center", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-play-circle text-2xl mr-4", __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 51, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium", __source: { fileName: "", lineNumber: 52, columnNumber: 19 }, __self: this }, "Summer Vibes 2024"), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 53, columnNumber: 19 }, __self: this }, "20 tracks - 1h 15min"))), /*#__PURE__*/ React.createElement("li", { className: "bg-white bg-opacity-20 p-4 rounded-lg flex items-center", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-play-circle text-2xl mr-4", __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium", __source: { fileName: "", lineNumber: 59, columnNumber: 19 }, __self: this }, "Late Night Grooves"), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 60, columnNumber: 19 }, __self: this }, "15 tracks - 58min"))), /*#__PURE__*/ React.createElement("li", { className: "bg-white bg-opacity-20 p-4 rounded-lg flex items-center", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-play-circle text-2xl mr-4", __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium", __source: { fileName: "", lineNumber: 66, columnNumber: 19 }, __self: this }, "Afrodite's Favorites"), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 67, columnNumber: 19 }, __self: this }, "25 tracks - 1h 30min"))))), activeTab === 'events' && /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "Upcoming Events"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-4", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "bg-white bg-opacity-20 p-4 rounded-lg", __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-medium", __source: { fileName: "", lineNumber: 79, columnNumber: 17 }, __self: this }, "Summer Beats Festival"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 80, columnNumber: 17 }, __self: this }, "Date: July 15, 2024"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this }, "Location: Sunshine Beach"), /*#__PURE__*/ React.createElement("button", { className: "mt-2 bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 82, columnNumber: 17 }, __self: this }, "Get Tickets")), /*#__PURE__*/ React.createElement("li", { className: "bg-white bg-opacity-20 p-4 rounded-lg", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-medium", __source: { fileName: "", lineNumber: 85, columnNumber: 17 }, __self: this }, "Club Neon Nights"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 86, columnNumber: 17 }, __self: this }, "Date: August 5, 2024"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 87, columnNumber: 17 }, __self: this }, "Location: Neon Lounge, Downtown"), /*#__PURE__*/ React.createElement("button", { className: "mt-2 bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 88, columnNumber: 17 }, __self: this }, "Get Tickets")), /*#__PURE__*/ React.createElement("li", { className: "bg-white bg-opacity-20 p-4 rounded-lg", __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-medium", __source: { fileName: "", lineNumber: 91, columnNumber: 17 }, __self: this }, "Cosmic Rhythm Rave"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 92, columnNumber: 17 }, __self: this }, "Date: September 20, 2024"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 93, columnNumber: 17 }, __self: this }, "Location: Starlight Arena"), /*#__PURE__*/ React.createElement("button", { className: "mt-2 bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 94, columnNumber: 17 }, __self: this }, "Get Tickets")))), activeTab === 'community' && /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, "Fan Community"), /*#__PURE__*/ React.createElement("div", { className: "bg-white bg-opacity-20 p-4 rounded-lg mb-4", __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-medium mb-2", __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this }, "Fan Chat"), /*#__PURE__*/ React.createElement("div", { className: "h-60 overflow-y-auto mb-4 bg-white bg-opacity-10 p-2 rounded", __source: { fileName: "", lineNumber: 105, columnNumber: 15 }, __self: this }, chatMessages.map((msg, index)=>/*#__PURE__*/ React.createElement("p", { key: index, __source: { fileName: "", lineNumber: 107, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 107, columnNumber: 34 }, __self: this }, msg.user, ":"), " ", msg.text))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleMessageSubmit, className: "flex", __source: { fileName: "", lineNumber: 110, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", value: message, onChange: (e)=>setMessage(e.target.value), placeholder: "Type your message...", className: "flex-grow px-3 py-2 bg-white bg-opacity-20 rounded-l-md text-white placeholder-gray-300", __source: { fileName: "", lineNumber: 111, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-4 rounded-r-md", __source: { fileName: "", lineNumber: 119, columnNumber: 17 }, __self: this }, "Send"))))), /*#__PURE__*/ React.createElement("footer", { className: "fixed bottom-0 left-0 right-0 bg-purple-800 py-2", __source: { fileName: "", lineNumber: 126, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "flex justify-around", __source: { fileName: "", lineNumber: 127, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab('home'), className: `flex flex-col items-center ${activeTab === 'home' ? 'text-pink-300' : 'text-white'}`, __source: { fileName: "", lineNumber: 128, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home text-xl", __source: { fileName: "", lineNumber: 129, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-xs", __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab('playlists'), className: `flex flex-col items-center ${activeTab === 'playlists' ? 'text-pink-300' : 'text-white'}`, __source: { fileName: "", lineNumber: 132, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-music text-xl", __source: { fileName: "", lineNumber: 133, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-xs", __source: { fileName: "", lineNumber: 134, columnNumber: 13 }, __self: this }, "Playlists")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab('events'), className: `flex flex-col items-center ${activeTab === 'events' ? 'text-pink-300' : 'text-white'}`, __source: { fileName: "", lineNumber: 136, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-calendar-alt text-xl", __source: { fileName: "", lineNumber: 137, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-xs", __source: { fileName: "", lineNumber: 138, columnNumber: 13 }, __self: this }, "Events")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab('community'), className: `flex flex-col items-center ${activeTab === 'community' ? 'text-pink-300' : 'text-white'}`, __source: { fileName: "", lineNumber: 140, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-users text-xl", __source: { fileName: "", lineNumber: 141, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-xs", __source: { fileName: "", lineNumber: 142, columnNumber: 13 }, __self: this }, "Community"))))); }