function MainComponent() { const [selectedFile, setSelectedFile] = React.useState(null); const [uploadProgress, setUploadProgress] = React.useState(0); const handleFileChange = (event)=>{ setSelectedFile(event.target.files[0]); }; const handleUpload = ()=>{ if (selectedFile) { let progress = 0; const interval = setInterval(()=>{ progress += 10; setUploadProgress(progress); if (progress >= 100) { clearInterval(interval); setTimeout(()=>setUploadProgress(0), 1000); } }, 300); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-r from-blue-500 to-purple-600 flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-xl p-8 max-w-md w-full", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center mb-6 text-gray-800", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, "CloudSync"), /*#__PURE__*/ React.createElement("p", { className: "text-center text-gray-600 mb-6", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "Distributed and Fault-Tolerant Storage System"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", onChange: handleFileChange, className: "hidden", id: "fileInput", name: "fileInput", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "fileInput", className: "block w-full text-center py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 cursor-pointer", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "Choose File")), selectedFile && /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 mb-4 text-center", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Selected: ", selectedFile.name), /*#__PURE__*/ React.createElement("button", { onClick: handleUpload, className: "w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "Upload to CloudSync"), uploadProgress > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 rounded-full h-2.5 dark:bg-gray-700", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-600 h-2.5 rounded-full", style: { width: `${uploadProgress}%` }, __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 mt-2 text-center", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, "Uploading: ", uploadProgress, "%"))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-white text-center", __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, "Key Features:"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside text-sm space-y-2", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, "Distributed Storage Architecture"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, "Fault Tolerance and Data Redundancy"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, "Data Encryption and Security"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, "Scalable Architecture"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, "Versioning and Data Consistency"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, "Efficient Data Access and Management"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, "Monitoring and Analytics"))), /*#__PURE__*/ React.createElement("footer", { className: "mt-12 text-white text-sm", __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, "© 2024 CloudSync. All rights reserved."))); }