function MainComponent() { const [songSelected, setSongSelected] = React.useState(false); const [lyricsTranslated, setLyricsTranslated] = React.useState(""); const handleSongSelection = ()=>{ setSongSelected(true); // Fetch lyrics and translate if necessary (placeholder logic) const translatedLyrics = "Translated Lyrics in your native language."; setLyricsTranslated(translatedLyrics); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#1DB954] p-4 font-roboto", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-white text-4xl font-bold mb-6", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, "Spotify Lyrics Translator"), /*#__PURE__*/ React.createElement("button", { className: "flex items-center justify-center bg-white text-[#1DB954] px-4 py-2 rounded-full mb-4", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-spotify mr-2", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }), "Connect with Spotify"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[400px] bg-white p-6 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[#1DB954] text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, "Select a song"), /*#__PURE__*/ React.createElement("div", { className: "border border-[#1DB954] p-4 rounded-lg mb-4", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, songSelected ? /*#__PURE__*/ React.createElement("p", { className: "text-center text-gray-700", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, lyricsTranslated) : /*#__PURE__*/ React.createElement("p", { className: "text-center text-gray-700", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, "No song selected")), /*#__PURE__*/ React.createElement("button", { onClick: handleSongSelection, className: "w-full bg-[#1DB954] text-white px-4 py-2 rounded-full", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "Translate Lyrics")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, ` .fade-in { animation: fadeIn 0.5s ease-in-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } `)); }