function MainComponent() { const [isConverting, setIsConverting] = React.useState(false); const handleConvert = ()=>{ setIsConverting(true); setTimeout(()=>{ setIsConverting(false); alert('変換が完了しました。'); }, 2000); // Simulate a 2 second conversion time }; return /*#__PURE__*/ React.createElement("div", { className: "w-screen h-screen flex flex-col items-center justify-center bg-[#f0f4f8]", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[600px] h-[400px] border-4 border-dashed border-gray-300 flex items-center justify-center bg-white", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { id: "fileInput", type: "file", accept: ".mp4", name: "mp4File", className: "w-full h-full opacity-0", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "fileInput", className: "flex flex-col items-center justify-center cursor-pointer", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-upload text-3xl text-gray-500", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "mt-2 text-gray-500 font-roboto", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, "mp4動画をドラッグ&ドロップ"))), /*#__PURE__*/ React.createElement("button", { onClick: handleConvert, disabled: isConverting, className: `w-[150px] h-[50px] ${isConverting ? 'bg-gray-500' : 'bg-blue-500'} text-white font-roboto mt-5 absolute bottom-10 right-10`, __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, isConverting ? '変換中...' : '変換開始'), /*#__PURE__*/ React.createElement("label", { htmlFor: "outputFolder", className: "mt-5 cursor-pointer", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, "出力先フォルダ:"), /*#__PURE__*/ React.createElement("input", { type: "file", id: "outputFolder", name: "outputFolder", webkitdirectory: "", directory: "", className: "ml-2 cursor-pointer", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }))); }