function MainComponent() { const [email, setEmail] = React.useState(''); const handleFileUpload = async (event)=>{ const file = event.target.files[0]; if (file) { const formData = new FormData(); formData.append('file', file); const response = await fetch('YOUR_OCR_API_ENDPOINT', { method: 'POST', body: formData }); const result = await response.json(); const extractedEmail = result.email; setEmail(extractedEmail); } }; const handleSubmit = async (event)=>{ event.preventDefault(); const formData = new FormData(event.target); await fetch('YOUR_GOOGLE_SHEETS_API_ENDPOINT', { method: 'POST', body: formData }); }; return /*#__PURE__*/ React.createElement("div", { className: "p-6 max-w-lg mx-auto bg-white shadow-md rounded-md", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "名前"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", id: "name", className: "mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "address", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "住所（都道府県のみ）"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "address", id: "address", className: "mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "free-text", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "自由入力エリア"), /*#__PURE__*/ React.createElement("textarea", { name: "free-text", id: "free-text", rows: "3", className: "mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "file-upload", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "画像アップロード"), /*#__PURE__*/ React.createElement("input", { type: "file", name: "file-upload", id: "file-upload", accept: "image/*", onChange: handleFileUpload, className: "mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "ocr-email", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "抽出されたメールアドレス"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "ocr-email", id: "ocr-email", value: email, readOnly: true, className: "mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "pt-4 flex justify-end", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-4 focus:ring-indigo-500 font-medium rounded-md text-sm px-4 py-2", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "送信")))); }