function MainComponent() { const [rankings, setRankings] = React.useState({ "Fearless": "", "1989": "", "Folklore": "", "Evermore": "", "Lover": "", "Red": "", "Speak Now": "", "Taylor Swift": "", "Reputation": "", "Midnights": "" }); const handleSubmit = (event)=>{ event.preventDefault(); const rankedAlbums = Object.entries(rankings).sort(([, a], [, b])=>a - b).map(([key])=>key).join(", "); alert(`Your ranking has been saved: ${rankedAlbums}. Share your ranking with your friends!`); setRankings({ "Fearless": "", "1989": "", "Folklore": "", "Evermore": "", "Lover": "", "Red": "", "Speak Now": "", "Taylor Swift": "", "Reputation": "", "Midnights": "" }); }; const handleChange = (album, value)=>{ setRankings((prev)=>({ ...prev, [album]: Number(value) })); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-center bg-[#f1c0e8]", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-10 bg-white shadow-lg w-[90%] max-w-[900px] rounded-xl", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-3xl text-center mb-6 text-[#121212]", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "Rank Taylor Swift's Albums!"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg text-center mb-8 text-[#374151]", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, "Love Taylor Swift's music? Rank all her albums from your most favorite to least favorite. Don't forget to share your ranking with your friends!"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, Object.keys(rankings).map((album)=>/*#__PURE__*/ React.createElement("div", { key: album, className: "mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: album, className: "font-roboto text-sm mb-2 text-[#121212]", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, album), /*#__PURE__*/ React.createElement("select", { name: album, id: album, value: rankings[album], onChange: (e)=>handleChange(album, e.target.value), className: "w-full p-2 border rounded-lg focus:outline-none focus:border-pink-500", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }, "Rank"), Array.from({ length: 10 }, (_, i)=>/*#__PURE__*/ React.createElement("option", { key: i + 1, value: i + 1, __source: { fileName: "", lineNumber: 49, columnNumber: 19 }, __self: this }, i + 1))))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-4 bg-pink-500 text-white font-roboto rounded-lg hover:bg-pink-600 transition-colors", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "Share Your Ranking")))); }