function MainComponent() { const moodStats = { happy: "25%", sad: "15%", excited: "40%", anxious: "20%" }; const moodTimeline = [ { date: "01/04/2023", mood: "Happy" }, { date: "02/04/2023", mood: "Excited" }, { date: "03/04/2023", mood: "Sad" }, { date: "04/04/2023", mood: "Anxious" } ]; const dashboardContent = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center space-y-4", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-semibold text-[#121212]", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, "Mood Statistics for This Month"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4 w-full px-4", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, Object.entries(moodStats).map(([mood, percentage])=>/*#__PURE__*/ React.createElement("div", { key: mood, className: "p-4 bg-[#f1f3f5] rounded-lg flex justify-between items-center my-2", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-xl capitalize", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, mood), /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, percentage)))), /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-semibold text-[#121212] mt-8", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, "Mood Changes Over Time"), /*#__PURE__*/ React.createElement("div", { className: "w-full px-4", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, moodTimeline.map((entry)=>/*#__PURE__*/ React.createElement("div", { key: entry.date, className: "p-4 bg-[#e7eaf0] rounded-lg flex flex-col sm:flex-row justify-between items-center my-2", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, entry.date), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-lg capitalize", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, entry.mood))))); return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#eef2f7] text-center pt-8", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, dashboardContent)); }