function MainComponent() { const [entries, setEntries] = React.useState([]); const [title, setTitle] = React.useState(''); const [isDarkMode, setIsDarkMode] = React.useState(false); const toggleDarkMode = ()=>setIsDarkMode(!isDarkMode); const handleTitleInputChange = (event)=>{ setTitle(event.target.value); }; const handleFormSubmit = async (event)=>{ event.preventDefault(); const response = await fetch('/integrations/google-gemini/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": `題名『${title}』に基づく日記の内容を生成してください。` } ] }) }); const { choices } = await response.json(); const newEntry = { date: event.target.date.value, title: title, content: choices[0].message.content }; setEntries([ ...entries, newEntry ]); setTitle(''); event.target.reset(); }; const bgColor = isDarkMode ? 'bg-[#333]' : 'bg-[#f5deb3]'; const textColor = isDarkMode ? 'text-white' : 'text-[#654321]'; const cardBgColor = isDarkMode ? 'bg-[#555]' : 'bg-white'; return /*#__PURE__*/ React.createElement("div", { className: `${bgColor} min-h-screen flex flex-col items-center py-8 transition-colors duration-500`, __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: `text-4xl font-serif mb-6 ${textColor}`, __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, "シンプルな日記アプリ"), /*#__PURE__*/ React.createElement("button", { onClick: toggleDarkMode, className: "absolute top-5 right-5 p-2 rounded-full text-xl", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, isDarkMode ? '🌞' : '🌜'), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-lg", onSubmit: handleFormSubmit, __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "title", className: `block text-md font-bold mb-2 ${textColor}`, __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "題名"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "title", name: "title", value: title, onChange: handleTitleInputChange, className: "shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "date", className: `block text-md font-bold mb-2 ${textColor}`, __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "日付"), /*#__PURE__*/ React.createElement("input", { type: "date", id: "date", name: "date", className: "shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#8b4513] hover:bg-[#a0522d] text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "保存"))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 w-full max-w-lg", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, entries.map((entry, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `${cardBgColor} mb-4 p-4 rounded shadow transition-colors duration-500`, __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-lg mb-2", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, entry.date, " - ", entry.title), /*#__PURE__*/ React.createElement("p", { className: `${textColor}`, __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, entry.content))))); }