function MainComponent() { const [url, setUrl] = React.useState(''); const [isDownloading, setIsDownloading] = React.useState(false); const [downloadError, setDownloadError] = React.useState(''); const handleUrlChange = (event)=>{ setUrl(event.target.value); setDownloadError(''); }; const handleDownload = async (event)=>{ event.preventDefault(); setIsDownloading(true); try { // Simulating downloading video functionality await new Promise((resolve)=>setTimeout(resolve, 3000)); setIsDownloading(false); } catch (error) { setDownloadError('Failed to download video. Please try again.'); setIsDownloading(false); } }; const downloadButtonClassNames = isDownloading ? 'w-full px-4 py-2 bg-[#007bff] text-white rounded opacity-50 cursor-not-allowed' : 'w-full px-4 py-2 bg-[#007bff] text-white rounded hover:bg-[#0056b3]'; const errorMessage = downloadError && /*#__PURE__*/ React.createElement("p", { className: "text-sm text-red-500 font-roboto", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, downloadError); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f7f7f7] p-4", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md p-8 bg-white shadow rounded", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold text-center text-[#333] mb-6 font-roboto", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, "Download Video"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleDownload, className: "space-y-4", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "videoUrl", className: "text-sm font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, "Video URL:"), /*#__PURE__*/ React.createElement("input", { type: "url", name: "videoUrl", id: "videoUrl", required: true, placeholder: "Enter video URL", className: "w-full p-2 mt-1 border rounded font-roboto", value: url, onChange: handleUrlChange, __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this })), errorMessage, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: downloadButtonClassNames, disabled: isDownloading, __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, isDownloading ? 'Downloading...' : 'Download')))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, ` @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } `)); }