function MainComponent() { const [email, setEmail] = React.useState(''); const [phoneNumber, setPhoneNumber] = React.useState(''); const [username, setUsername] = React.useState(''); const [password, setPassword] = React.useState(''); const [video, setVideo] = React.useState(null); const [caption, setCaption] = React.useState(''); const [scheduleDate, setScheduleDate] = React.useState(''); const [uploadProgress, setUploadProgress] = React.useState(0); const handleEmailChange = (e)=>{ setEmail(e.target.value); }; const handlePhoneNumberChange = (e)=>{ setPhoneNumber(e.target.value); }; const handleUsernameChange = (e)=>{ setUsername(e.target.value); }; const handlePasswordChange = (e)=>{ setPassword(e.target.value); }; const handleVideoChange = (e)=>{ setVideo(e.target.files[0]); }; const handleCaptionChange = (e)=>{ setCaption(e.target.value); }; const handleScheduleDateChange = (e)=>{ setScheduleDate(e.target.value); }; const handleSubmit = async (e)=>{ e.preventDefault(); setUploadProgress(10); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f8f8f8] py-12 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md w-full bg-white p-8 border border-gray-300 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mt-6 text-center text-3xl font-bold font-roboto text-gray-900", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "TikTok Account Registration and Video Upload"), /*#__PURE__*/ React.createElement("form", { className: "mt-8 space-y-6", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: "font-roboto text-sm text-gray-700", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("input", { name: "email", type: "email", required: true, className: "appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm", value: email, onChange: handleEmailChange, __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "phoneNumber", className: "font-roboto text-sm text-gray-700", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, "Phone Number"), /*#__PURE__*/ React.createElement("input", { name: "phoneNumber", type: "text", required: true, className: "appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm", value: phoneNumber, onChange: handlePhoneNumberChange, __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "username", className: "font-roboto text-sm text-gray-700", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, "Username"), /*#__PURE__*/ React.createElement("input", { name: "username", type: "text", required: true, className: "appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm", value: username, onChange: handleUsernameChange, __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "password", className: "font-roboto text-sm text-gray-700", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("input", { name: "password", type: "password", required: true, className: "appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm", value: password, onChange: handlePasswordChange, __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "videoUpload", className: "font-roboto text-sm text-gray-700", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "Video Upload"), /*#__PURE__*/ React.createElement("input", { name: "video", type: "file", required: true, className: "appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm", onChange: handleVideoChange, __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "caption", className: "font-roboto text-sm text-gray-700", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, "Caption"), /*#__PURE__*/ React.createElement("input", { name: "caption", type: "text", className: "appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm", value: caption, onChange: handleCaptionChange, __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "scheduleDate", className: "font-roboto text-sm text-gray-700", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, "Schedule Date (Optional)"), /*#__PURE__*/ React.createElement("input", { name: "scheduleDate", type: "date", className: "appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm", value: scheduleDate, onChange: handleScheduleDateChange, __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto text-sm text-gray-700", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, "Upload Progress: ", uploadProgress, "%")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-[#fe2c55] hover:bg-[#fc1b4e] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#fc1b4e]", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, "Submit"))))); }