function MainComponent() { const [uploadProgress, setUploadProgress] = React.useState(0); const [isUploaded, setIsUploaded] = React.useState(false); const [link, setLink] = React.useState(''); const handleFilesChange = (event)=>{ setIsUploaded(false); const files = event.target.files; const totalFiles = files.length; let progress = 0; const interval = setInterval(()=>{ if (progress >= 100) { clearInterval(interval); setIsUploaded(true); setLink('https://example.com/shared-link'); } else { progress += 10; setUploadProgress(Math.min(progress, 100)); } }, 200); }; const handleCreateLinkClick = ()=>{ // Logic to create a shareable link if (isUploaded) { navigator.clipboard.writeText(link).then(()=>{ alert('Link copied to clipboard!'); }).catch(()=>{ alert('Failed to copy link to clipboard.'); }); } }; const progressBarStyle = { width: `${uploadProgress}%` }; const uploadButtonClassNames = `flex items-center px-4 py-2 bg-[#167DFF] text-white rounded-md font-roboto cursor-pointer hover:bg-[#0b5ed7] focus:ring-2 focus:ring-[#60A5FA] focus:ring-opacity-50`; const createLinkButtonClassNames = isUploaded ? `${uploadButtonClassNames} ml-4` : `${uploadButtonClassNames} ml-4 opacity-50 cursor-not-allowed`; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F0F4F8] p-6 space-y-6 md:space-y-10", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl text-[#121212] font-roboto mb-10", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, "Cloud Share Free"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-4 md:flex-row md:space-x-4 md:space-y-0", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", id: "file-upload", name: "file-upload", className: "hidden", accept: "video/*,image/*", multiple: true, onChange: handleFilesChange, __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "file-upload", className: uploadButtonClassNames, __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-cloud-upload-alt mr-2", "aria-hidden": "true", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }), "Upload videos, photos"), /*#__PURE__*/ React.createElement("button", { className: createLinkButtonClassNames, onClick: handleCreateLinkClick, disabled: !isUploaded, __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-link mr-2", "aria-hidden": "true", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }), "Share")), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#167DFF] h-2.5 rounded-full", style: progressBarStyle, __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }))); }