function EnergyAreaComponent({ icon, name, energyLevel, onEnergyLevelChange }) { const nameLowercase = name.toLowerCase(); return /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-6 w-full", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${icon} text-2xl mr-3`, __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, name)), /*#__PURE__*/ React.createElement("input", { type: "range", name: nameLowercase, min: "0", max: "100", value: energyLevel, onChange: (e)=>onEnergyLevelChange(nameLowercase, e.target.value), className: "w-full", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this })); } function EnergyAreaComponentStory() { const dummyEnergyLevels = { area1: 50, area2: 30, area3: 70 }; const handleChange = (areaName, value)=>{ console.log(`Energy level for ${areaName}: ${value}`); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(EnergyAreaComponent, { icon: "fas fa-sun", name: "Area1", energyLevel: dummyEnergyLevels.area1, onEnergyLevelChange: handleChange, __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(EnergyAreaComponent, { icon: "fas fa-wind", name: "Area2", energyLevel: dummyEnergyLevels.area2, onEnergyLevelChange: handleChange, __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(EnergyAreaComponent, { icon: "fas fa-tint", name: "Area3", energyLevel: dummyEnergyLevels.area3, onEnergyLevelChange: handleChange, __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this })); } function EnergyDisplayComponent({ icon, label }) { return /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${icon} text-2xl mr-3`, __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, label)); } function EnergyDisplayComponentStory() { const areas = [ { icon: 'fa fa-bolt', name: 'Physical' }, { icon: 'fa fa-brain', name: 'Mental' }, { icon: 'fa fa-heart', name: 'Emotional' }, { icon: 'fa fa-star', name: 'Spiritual' }, { icon: 'fa fa-lightbulb', name: 'Creative' }, { icon: 'fa fa-users', name: 'Social' } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, areas.map((area, index)=>/*#__PURE__*/ React.createElement(EnergyDisplayComponent, { key: index, icon: area.icon, label: area.name, __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }))); } function MainComponent() { const [energyLevels, setEnergyLevels] = React.useState({ physical: 50, mental: 60, emotional: 40, spiritual: 70, creative: 55, social: 30 }); const handleEnergyChange = (area, value)=>{ setEnergyLevels((prevLevels)=>({ ...prevLevels, [area]: Number(value) })); }; const suggestions = { physical: "Take a short walk or stretch.", mental: "Read a book or solve a puzzle.", emotional: "Talk to a friend or write in a journal.", spiritual: "Meditate or spend time in nature.", creative: "Engage in a fun hobby or craft.", social: "Join a group or call a family member." }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-semibold mb-6", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, "Energy Assessment"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(EnergyAreaComponent, { icon: "fas fa-dumbbell", name: "Physical", energyLevel: energyLevels.physical, onEnergyLevelChange: handleEnergyChange, __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(EnergyAreaComponent, { icon: "fas fa-brain", name: "Mental", energyLevel: energyLevels.mental, onEnergyLevelChange: handleEnergyChange, __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(EnergyAreaComponent, { icon: "fas fa-heart", name: "Emotional", energyLevel: energyLevels.emotional, onEnergyLevelChange: handleEnergyChange, __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(EnergyAreaComponent, { icon: "fas fa-praying-hands", name: "Spiritual", energyLevel: energyLevels.spiritual, onEnergyLevelChange: handleEnergyChange, __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(EnergyAreaComponent, { icon: "fas fa-paint-brush", name: "Creative", energyLevel: energyLevels.creative, onEnergyLevelChange: handleEnergyChange, __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(EnergyAreaComponent, { icon: "fas fa-users", name: "Social", energyLevel: energyLevels.social, onEnergyLevelChange: handleEnergyChange, __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, "Suggestions for More Energy"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, Object.entries(suggestions).map(([area, suggestion])=>/*#__PURE__*/ React.createElement("li", { key: area, className: "mb-2", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { className: "capitalize", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, area, ":"), " ", suggestion)))), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, "Energy Levels"), Object.keys(energyLevels).map((area, index)=>/*#__PURE__*/ React.createElement(EnergyDisplayComponent, { key: index, icon: `fa fa-${area}`, label: `${area.charAt(0).toUpperCase()}${area.slice(1)}: ${energyLevels[area]}%`, __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this })))); }

Energy Assessment

Physical

Mental

Emotional

Spiritual

Creative

Social

Suggestions for More Energy

Energy Levels

Physical: 50%

Mental: 60%

Emotional: 40%

Spiritual: 70%

Creative: 55%

Social: 30%