function MainComponent() { const [videoFile, setVideoFile] = React.useState(null); const [imageFile, setImageFile] = React.useState(null); const [isProcessing, setIsProcessing] = React.useState(false); const [processedFileUrl, setProcessedFileUrl] = React.useState(''); const handleVideoChange = (event)=>{ setVideoFile(event.target.files[0]); }; const handleImageChange = (event)=>{ setImageFile(event.target.files[0]); }; const initiateProcessing = ()=>{ if (videoFile && imageFile) { setIsProcessing(true); setTimeout(()=>{ setProcessedFileUrl('https://www.create.xyz/app/processed-download-link'); setIsProcessing(false); }, 2000); } }; const processingStyle = isProcessing ? { animation: 'spin 1s linear infinite' } : {}; const isInitiateEnabled = videoFile && imageFile && !isProcessing; const isDownloadEnabled = processedFileUrl && !isProcessing; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#FAFAFA]", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "upload-video", className: "cursor-pointer", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4 border-2 border-dashed border-gray-300 mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#3D3D3D]", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, "Upload Video"), /*#__PURE__*/ React.createElement("i", { className: "fa fa-video-camera text-4xl", style: processingStyle, __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("input", { id: "upload-video", type: "file", name: "video", accept: "video/*", className: "hidden", onChange: handleVideoChange, __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "upload-image", className: "cursor-pointer", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4 border-2 border-dashed border-gray-300 mb-4", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#3D3D3D]", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, "Upload Image"), /*#__PURE__*/ React.createElement("i", { className: "fa fa-image text-4xl", style: processingStyle, __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("input", { id: "upload-image", type: "file", name: "image", accept: "image/*", className: "hidden", onChange: handleImageChange, __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "py-2 px-4 bg-[#4F46E5] text-white font-roboto rounded hover:bg-[#4338CA] transition duration-300 mb-4", onClick: initiateProcessing, disabled: !isInitiateEnabled, __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, "Start Processing"), /*#__PURE__*/ React.createElement("button", { className: "py-2 px-4 bg-[#22C55E] text-white font-roboto rounded hover:bg-[#16A34A] transition duration-300", onClick: ()=>{ if (isDownloadEnabled) { window.open(processedFileUrl, '_blank').focus(); } }, disabled: !isDownloadEnabled, __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, "Download Video")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, ` @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } `)); }