function MainComponent() { const DAILY_LIMIT = 2500; const MORNING_HOME = 700; const EVENING_HOME = 850; const [ohanaSmile, setOhanaSmile] = React.useState(0); const [mirakuru, setMirakuru] = React.useState(0); const total = MORNING_HOME + ohanaSmile + mirakuru + EVENING_HOME; const remainingMax = DAILY_LIMIT - total; return /*#__PURE__*/ React.createElement("div", { className: "max-w-[800px] mx-auto p-5 bg-[#f0f8ff] text-[#333] font-sans", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-5 shadow-md", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center text-[#4a69bd] text-2xl font-bold", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, "志保さんの水分摂取管理アプリ"), /*#__PURE__*/ React.createElement("p", { className: "subtitle text-center text-[#6a89cc] mb-5", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, "一日の水分摂取量は2500ml以内を基準とします"), /*#__PURE__*/ React.createElement("div", { className: "input-section mb-5 bg-[#e3f2fd] p-5 rounded-lg", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-center text-lg font-semibold", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, "水分摂取量入力"), /*#__PURE__*/ React.createElement("label", { htmlFor: "ohanaSmile", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, "オハナスマイル (ml):"), /*#__PURE__*/ React.createElement("input", { name: "ohanaSmile", type: "number", id: "ohanaSmile", min: "0", value: ohanaSmile, onChange: (e)=>setOhanaSmile(parseInt(e.target.value) || 0), className: "ml-2 w-[100px] p-1 border border-[#4a69bd] rounded-md", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 28, columnNumber: 18 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "mirakuru", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "みらくるor移動支援 (ml):"), /*#__PURE__*/ React.createElement("input", { name: "mirakuru", type: "number", id: "mirakuru", min: "0", value: mirakuru, onChange: (e)=>setMirakuru(parseInt(e.target.value) || 0), className: "ml-2 w-[100px] p-1 border border-[#4a69bd] rounded-md", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 39, columnNumber: 18 }, __self: this })), /*#__PURE__*/ React.createElement("div", { id: "result", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full border-collapse mt-5", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border p-3 text-left bg-[#4a69bd] text-white", __source: { fileName: "", lineNumber: 46, columnNumber: 17 }, __self: this }, "場所"), /*#__PURE__*/ React.createElement("th", { className: "border p-3 text-left bg-[#4a69bd] text-white", __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }, "摂取量 (ml)"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border p-3", __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }, "朝のホーム（固定）"), /*#__PURE__*/ React.createElement("td", { className: "border p-3", __source: { fileName: "", lineNumber: 53, columnNumber: 17 }, __self: this }, MORNING_HOME)), /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border p-3", __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }, "オハナスマイル"), /*#__PURE__*/ React.createElement("td", { className: "border p-3", id: "ohanaSmileResult", __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }, ohanaSmile)), /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border p-3", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, "みらくるor移動支援"), /*#__PURE__*/ React.createElement("td", { className: "border p-3", id: "mirakuruResult", __source: { fileName: "", lineNumber: 61, columnNumber: 17 }, __self: this }, mirakuru)), /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border p-3", __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this }, "夜のホーム（固定）"), /*#__PURE__*/ React.createElement("td", { className: "border p-3", __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }, EVENING_HOME)), /*#__PURE__*/ React.createElement("tr", { className: "highlight font-bold text-[#4a69bd]", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border p-3", __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this }, "合計"), /*#__PURE__*/ React.createElement("td", { className: "border p-3", id: "totalIntake", __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }, total)))), /*#__PURE__*/ React.createElement("p", { id: "mirakuruMax", className: "highlight font-bold text-[#4a69bd]", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, `みらくるor移動支援の残り最大摂取可能量: ${Math.max(0, remainingMax)}ml`), /*#__PURE__*/ React.createElement("p", { id: "warningMessage", className: "warning text-[#e74c3c] font-bold p-3 bg-[#fadbd8] rounded-md mt-3", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, total > DAILY_LIMIT && `警告: 一日の限界水分量${DAILY_LIMIT}mlを${total - DAILY_LIMIT}ml超えています！`)))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 87, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 88, columnNumber: 7 }, __self: this })); }

場所	摂取量 (ml)
朝のホーム（固定）	700
オハナスマイル	0
みらくるor移動支援	0
夜のホーム（固定）	850
合計	1550