function MainComponent() { const [summary, setSummary] = React.useState(""); const [formData, setFormData] = React.useState({ eventTitle: "", eventDescription: "", eventStart: "", eventEnd: "" }); const handleDrop = (event)=>{ event.preventDefault(); const file = event.dataTransfer.files[0]; if (file) { const reader = new FileReader(); reader.onload = async (e)=>{ const text = e.target.result; const apiEndpoint = document.querySelector("#api-endpoint").value; const response = await fetch(apiEndpoint, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ text }) }); const data = await response.json(); setSummary(data.summary); }; reader.readAsText(file); } }; const handleDragOver = (event)=>{ event.preventDefault(); }; const handleInputChange = (e)=>{ const { name, value } = e.target; setFormData({ ...formData, [name]: value }); }; const handleSubmit = async (e)=>{ e.preventDefault(); const response = await fetch("https://script.googleapis.com/v1/calendar/events", { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ summary: formData.eventTitle, description: formData.eventDescription, start: { dateTime: formData.eventStart }, end: { dateTime: formData.eventEnd } }) }); const data = await response.json(); setSummary(data.summary); }; return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-screen bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 57, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-lg w-[400px]", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto mb-4 text-center", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, "ファイルをドラッグ＆ドロップしてください"), /*#__PURE__*/ React.createElement("div", { onDrop: handleDrop, onDragOver: handleDragOver, className: "border-2 border-dashed border-gray-300 p-10 text-center rounded-lg cursor-pointer hover:bg-gray-100", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-crimson-text text-gray-500", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, "ここにファイルをドロッグします")), /*#__PURE__*/ React.createElement("form", { className: "mt-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "api-endpoint", className: "block font-roboto text-gray-700 mb-2", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "APIエンドポイント"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "api-endpoint", name: "api-endpoint", className: "w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "eventTitle", className: "block font-roboto text-gray-700 mb-2", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "イベントタイトル"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "eventTitle", name: "eventTitle", value: formData.eventTitle, onChange: handleInputChange, className: "w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "eventDescription", className: "block font-roboto text-gray-700 mb-2", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, "イベント説明"), /*#__PURE__*/ React.createElement("textarea", { id: "eventDescription", name: "eventDescription", value: formData.eventDescription, onChange: handleInputChange, className: "w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "eventStart", className: "block font-roboto text-gray-700 mb-2", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, "開始日時"), /*#__PURE__*/ React.createElement("input", { type: "datetime-local", id: "eventStart", name: "eventStart", value: formData.eventStart, onChange: handleInputChange, className: "w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "eventEnd", className: "block font-roboto text-gray-700 mb-2", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, "終了日時"), /*#__PURE__*/ React.createElement("input", { type: "datetime-local", id: "eventEnd", name: "eventEnd", value: formData.eventEnd, onChange: handleInputChange, className: "w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-700 font-roboto", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, "予定を追加する")), /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-gray-100 rounded-lg", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl mb-2", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, "要約"), /*#__PURE__*/ React.createElement("p", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, summary || "ここに要約が表示されます...")))); }