function MainComponent() { const [userActivityPoints, setUserActivityPoints] = React.useState(0); const [leaderboard, setLeaderboard] = React.useState([ { name: "Mahin Jahan", activityPoints: 50, avatar: "avatar1.png" }, { name: "Isabella Wright", activityPoints: 46, avatar: "avatar2.png" }, { name: "Jackson Smith", activityPoints: 48, avatar: "avatar3.png" }, { name: "You", activityPoints: userActivityPoints, avatar: "your-avatar.png" }, { name: "Martha Anderson", activityPoints: 28, avatar: "avatar4.png" }, { name: "Julia Clover", activityPoints: 29, avatar: "avatar5.png" }, { name: "Carrie Henderson", activityPoints: 30, avatar: "avatar6.png" } ]); React.useEffect(()=>{ setLeaderboard((currentLeaderboard)=>currentLeaderboard.map((entry)=>entry.name === "You" ? { ...entry, activityPoints: userActivityPoints } : entry)); }, [ userActivityPoints ]); const sortedLeaderboard = leaderboard.sort((a, b)=>b.activityPoints - a.activityPoints); return /*#__PURE__*/ React.createElement("div", { className: "bg-[url('./assets/fitness-background.png')] bg-cover min-h-screen flex flex-col items-center pt-10", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-around w-full px-2", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-white px-4 py-2 rounded-full bg-[#4AB8E8] font-roboto", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, "Local"), /*#__PURE__*/ React.createElement("button", { className: "text-white px-4 py-2 rounded-full bg-[#F4B740] font-roboto", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "Friends"), /*#__PURE__*/ React.createElement("button", { className: "text-white px-4 py-2 rounded-full bg-[#D53F8C] font-roboto", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "Global")), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 xl:w-1/3 mt-6 px-4", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, sortedLeaderboard.map((entry, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex items-center justify-between rounded-lg px-3 py-2 ${index === 0 ? 'bg-[#FFCE31]' : 'bg-[#FFFFFF] bg-opacity-10'} my-1`, __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, index < 3 && /*#__PURE__*/ React.createElement("div", { className: "mr-2 flex items-center justify-center w-8 h-8 bg-white text-black rounded-full text-sm font-roboto", __source: { fileName: "", lineNumber: 35, columnNumber: 17 }, __self: this }, index + 1), /*#__PURE__*/ React.createElement("img", { src: `./assets/${entry.avatar}`, alt: `Avatar of participant ${entry.name}`, className: `w-12 h-12 rounded-full border-4 ${index === 0 ? 'border-[#FFD700]' : index === 1 ? 'border-[#C0C0C0]' : index === 2 ? 'border-[#CD7F32]' : 'border-transparent'}`, __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "ml-2", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: `font-roboto ${index === 0 ? 'text-xl' : ''} ${entry.name === 'You' ? 'text-[#47F8D1]' : 'text-white'}`, __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this }, entry.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 font-roboto text-xs", __source: { fileName: "", lineNumber: 46, columnNumber: 17 }, __self: this }, "Quests: ", entry.activityPoints))), entry.activityPoints > 0 && /*#__PURE__*/ React.createElement("span", { className: `text-sm font-roboto text-white ${entry.name === 'You' ? 'bg-[#47F8D1]' : 'bg-[#FFFFFF]'} px-2 py-1 rounded-full`, __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, entry.activityPoints)))), /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-0 left-0 right-0 p-4 bg-[#000000] bg-opacity-75", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-evenly", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-white text-lg", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home", __source: { fileName: "", lineNumber: 59, columnNumber: 50 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-[#47F8D1] text-lg", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chart-line", __source: { fileName: "", lineNumber: 60, columnNumber: 54 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-white text-lg", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-user", __source: { fileName: "", lineNumber: 61, columnNumber: 50 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-white text-lg", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-dumbbell", __source: { fileName: "", lineNumber: 62, columnNumber: 50 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-white text-lg", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog", __source: { fileName: "", lineNumber: 63, columnNumber: 50 }, __self: this }))))); }