function MainComponent({ onSubmit, processType }) { const [file, setFile] = React.useState(null); const [url, setUrl] = React.useState(''); const handleSubmit = async ()=>{ let data; if (processType === 'upload' && file) { data = new FormData(); data.append('audio', file); } else if (processType === 'url' && url) { data = { url }; } onSubmit(data, processType); }; const handleFileChange = (e)=>{ setFile(e.target.files[0]); }; const handleUrlChange = (e)=>{ setUrl(e.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4 space-y-4", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { onDrop: (e)=>{ e.preventDefault(); setFile(e.dataTransfer.files[0]); }, onDragOver: (e)=>e.preventDefault(), className: "p-4 border-2 border-dashed border-gray-300 rounded-lg w-full text-center cursor-pointer", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, processType === 'upload' ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("label", { htmlFor: "file-upload", className: "cursor-pointer", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, "ドラッグ&ドロップ", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 37, columnNumber: 67 }, __self: this }), "またはクリックしてファイルをアップロード")), /*#__PURE__*/ React.createElement("input", { id: "file-upload", name: "file-upload", type: "file", className: "hidden", accept: "audio/*", onChange: handleFileChange, __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this })) : /*#__PURE__*/ React.createElement("input", { type: "text", name: "url-input", className: "border border-gray-300 p-2 w-full", placeholder: "音声ファイルのURLを入力", value: url, onChange: handleUrlChange, __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleSubmit, className: "px-4 py-2 bg-blue-500 text-white font-roboto rounded", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, "文字起こしを開始")); } function StoryComponent() { const mockSubmit = (data, processType)=>{ if (processType === 'upload') { alert(`File uploading: ${data.get('audio').name}`); } else { alert(`URL processing: ${data.url}`); } }; return /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 68, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, "ファイルアップロード"), /*#__PURE__*/ React.createElement(MainComponent, { onSubmit: mockSubmit, processType: "upload", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, "URLから文字起こし"), /*#__PURE__*/ React.createElement(MainComponent, { onSubmit: mockSubmit, processType: "url", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }))); }