function FullWidthDatePicker({ name }) { return /*#__PURE__*/ React.createElement("input", { type: "date", name: name, className: "mt-1 block w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function FullWidthDatePickerStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(FullWidthDatePicker, { name: "date", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this })); } function MainComponent() { const [entry, setEntry] = React.useState(null); const handleSubmit = async (e)=>{ e.preventDefault(); const date = e.target.date.value; const weather = e.target.weather.value; const diaryEntry = await fetchDiaryEntry(date, weather); const drawingImage = await fetchDrawingImage(diaryEntry); setEntry({ date, weather, diaryEntry, drawingImage }); }; const fetchDiaryEntry = async (date, weather)=>{ return `今日はとても暑い日でした。友だちと公園でたくさん遊びました。楽しかったです。`; }; const fetchDrawingImage = async (diaryEntry)=>{ return "/crayon-drawing.jpg"; }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-center bg-gray-100 p-4", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-lg rounded-lg p-6 w-full max-w-[600px]", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-4 font-roboto", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "日付:", /*#__PURE__*/ React.createElement(FullWidthDatePicker, { name: "date", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("label", { className: "block mb-4 font-roboto", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "天気:", /*#__PURE__*/ React.createElement("select", { name: "weather", className: "mt-1 block w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "晴れ", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, "晴れ"), /*#__PURE__*/ React.createElement("option", { value: "曇り", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, "曇り"), /*#__PURE__*/ React.createElement("option", { value: "雨", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, "雨"), /*#__PURE__*/ React.createElement("option", { value: "雪", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, "雪"))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white py-2 px-4 rounded font-roboto hover:bg-blue-700 transition-all duration-300 ease-in-out", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "生成する")))); }