function LearningGoalsTracker({ name, placeholder, value, onChange }) { return /*#__PURE__*/ React.createElement("input", { className: "border p-2 m-2", name: name, placeholder: placeholder, value: value, onChange: onChange, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function LearningGoalsTrackerStory() { const [goal, setGoal] = React.useState({ longTerm: '' }); const handleGoalChange = (e)=>{ setGoal({ ...goal, [e.target.name]: e.target.value }); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(LearningGoalsTracker, { name: "longTerm", placeholder: "長期目標", value: goal.longTerm, onChange: handleGoalChange, __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this })); } function MainComponent() { const [goal, setGoal] = React.useState({ longTerm: '', shortTerm: '' }); const [milestone, setMilestone] = React.useState(''); const [learningLog, setLearningLog] = React.useState(''); const [learningTime, setLearningTime] = React.useState(''); const [continuationDays, setContinuationDays] = React.useState(0); const handleGoalChange = (event)=>setGoal({ ...goal, [event.target.name]: event.target.value }); const handleMilestoneChange = (event)=>setMilestone(event.target.value); const handleLearningLogChange = (event)=>setLearningLog(event.target.value); const handleLearningTimeChange = (event)=>setLearningTime(event.target.value); const encouragementMessages = [ "がんばって！", "すごい！えらいね！", "きみならできる！" ]; let encouragementMessage = encouragementMessages[0]; if (continuationDays > 10) { encouragementMessage = encouragementMessages[1]; } if (continuationDays > 20) { encouragementMessage = encouragementMessages[2]; } return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-[#121212] mb-4", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, "学習目標設定"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(LearningGoalsTracker, { name: "longTerm", placeholder: "長期の学習目標", value: goal.longTerm, onChange: handleGoalChange, __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement(LearningGoalsTracker, { name: "shortTerm", placeholder: "短期の学習目標", value: goal.shortTerm, onChange: handleGoalChange, __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "マイルストーン", value: milestone, onChange: handleMilestoneChange, name: "milestone", className: "border p-2", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-[#121212] mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, "学習記録入力"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { placeholder: "今日の学習内容", value: learningLog, onChange: handleLearningLogChange, name: "learningLog", className: "border p-2 md:w-1/2", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", placeholder: "学習時間（分）", value: learningTime, onChange: handleLearningTimeChange, name: "learningTime", className: "border p-2 md:w-1/4", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "border p-2 bg-[#010101] text-white md:w-1/4", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "記録する"))), /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-[#121212] mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, "応援メッセージ"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center gap-4", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "継続日数: ", continuationDays, "日"), /*#__PURE__*/ React.createElement("div", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, encouragementMessage), /*#__PURE__*/ React.createElement("img", { src: "./encouragement-avatar.jpg", alt: "高校生女子マネージャーの応援画像", className: "w-[100px] h-[100px] rounded-full", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-[#121212] mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "画像生成エリア"))); }