function MainComponent() { const [inputFile, setInputFile] = React.useState(null); const [textOutput, setTextOutput] = React.useState(""); const [isLoading, setIsLoading] = React.useState(false); const handleFileChange = (e)=>{ setInputFile(e.target.files[0]); }; const handleSubmit = (e)=>{ e.preventDefault(); if (!inputFile) return; setIsLoading(true); const data = new FormData(); data.append("inputFile", inputFile); data.append("outputType", "html"); fetch("/integrations/file-converter/convert", { method: "POST", body: data }).then((response)=>response.text()).then((html)=>{ const parser = new DOMParser(); const doc = parser.parseFromString(html, "text/html"); setTextOutput(doc.body.textContent || ""); setIsLoading(false); }); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen p-4 bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-white shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-lg text-center mb-4 text-[#333]", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, "「PDF」テキスト化くん"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "file_input", className: "block mb-2 text-sm font-medium text-[#6B7280]", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "PDFをアップロードしてください"), /*#__PURE__*/ React.createElement("input", { type: "file", id: "file_input", name: "inputFile", accept: "application/pdf", className: "block w-full text-sm text-[#666] file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-[#E5E7EB] file:text-[#36454F]", onChange: handleFileChange, __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-[#4F46E5] text-white font-semibold rounded-lg", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, "テキスト化"))), isLoading ? /*#__PURE__*/ React.createElement("div", { className: "mt-4 spinner", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }) : textOutput && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-[#E5E7EB] rounded text-[#36454F] font-roboto", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, textOutput)), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, ` .spinner { border: 4px solid rgba(0,0,0,.1); width: 36px; height: 36px; border-radius: 50%; border-left-color: transparent; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } `)); }