function SpotifyConnectButton({ onClick, label }) { return /*#__PURE__*/ React.createElement("button", { className: "bg-[#21D19F] text-white font-semibold py-2 px-4 rounded-lg hover:bg-[#1ab88a] focus:outline-none font-roboto", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, label); } function SpotifyConnectButtonStory() { const handleConnect = ()=>{ console.log("Connecting to Spotify account..."); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SpotifyConnectButton, { onClick: handleConnect, label: "Connect your Spotify account", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this })); } function MainComponent() { const handleConnect = ()=>{ console.log("Connecting to Spotify account..."); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#6050DC] flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl text-white font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }, "Spotify Music RPG"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-[#E3DFFF] max-w-md text-center mb-8 font-roboto", __source: { fileName: "", lineNumber: 9, columnNumber: 13 }, __self: this }, "Turn your Spotify listening history into a Pokémon-like RPG game. Your songs are your Pokémon, level them up by how long you listen!"), /*#__PURE__*/ React.createElement(SpotifyConnectButton, { onClick: handleConnect, label: "Connect your Spotify account", __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-10 p-5 bg-white rounded-lg shadow-lg max-w-md", __source: { fileName: "", lineNumber: 14, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl text-[#323232] font-bold mb-2 font-roboto", __source: { fileName: "", lineNumber: 15, columnNumber: 17 }, __self: this }, "Game Guide"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5 text-[#555]", __source: { fileName: "", lineNumber: 16, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 17, columnNumber: 21 }, __self: this }, "Each song is a unique character in the game."), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 18, columnNumber: 21 }, __self: this }, "Songs gain experience based on playtime."), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 19, columnNumber: 21 }, __self: this }, "Music genres act like types in battles, each with unique strengths and weaknesses."), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 20, columnNumber: 21 }, __self: this }, "Battle other users to become the ultimate music master.")))); }