function MainComponent() { const [videoFile, setVideoFile] = React.useState(null); const [videoURL, setVideoURL] = React.useState(""); const [dragOver, setDragOver] = React.useState(false); const [uploading, setUploading] = React.useState(false); const [uploadProgress, setUploadProgress] = React.useState(0); const simulateUpload = (file)=>{ const fileSize = file.size; setUploading(true); let loaded = 0; const interval = setInterval(()=>{ loaded += fileSize / 100; const progress = Math.min(100, loaded / fileSize * 100); setUploadProgress(progress); if (progress === 100) { clearInterval(interval); setUploading(false); } }, 100); }; const handleDragOver = (e)=>{ e.preventDefault(); setDragOver(true); }; const handleDragLeave = (e)=>{ e.preventDefault(); setDragOver(false); }; const handleDrop = (e)=>{ e.preventDefault(); setDragOver(false); const file = e.dataTransfer.files[0]; if (file && file.type.startsWith("video/")) { setVideoFile(file); setVideoURL(URL.createObjectURL(file)); simulateUpload(file); } }; const handleFileChange = (e)=>{ const file = e.target.files[0]; if (file && file.type.startsWith("video/")) { setVideoFile(file); setVideoURL(URL.createObjectURL(file)); simulateUpload(file); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen", __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "flex items-center justify-between px-4 py-2 bg-[#343a40] text-white", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg font-roboto", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, "Logo"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 mr-2 text-sm font-roboto bg-[#007bff] rounded", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "Login"), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 text-sm font-roboto bg-[#28a745] rounded", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "Signup"))), /*#__PURE__*/ React.createElement("div", { className: "flex-grow flex items-center justify-center bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-full max-w-xl p-8 border-4 ${dragOver ? 'border-blue-600' : 'border-dashed border-gray-300'} rounded-lg bg-white`, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, uploading ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-600 h-2.5 rounded-full", style: { width: `${uploadProgress}%` }, __source: { fileName: "", lineNumber: 72, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-sm font-roboto text-gray-500", __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }, `Uploading: ${uploadProgress.toFixed(0)}%`)) : /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: "video/*", id: "videoUpload", className: "hidden", onChange: handleFileChange, name: "videoUpload", __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "mb-4 text-lg font-roboto text-gray-700", __source: { fileName: "", lineNumber: 86, columnNumber: 15 }, __self: this }, "Drag & drop your Figma prototype video here"), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto text-gray-500", __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }, "or"), /*#__PURE__*/ React.createElement("label", { htmlFor: "videoUpload", className: "px-4 py-2 mt-2 text-sm font-roboto text-white bg-blue-600 rounded cursor-pointer", __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }, "Choose a video"))))); }