function MainComponent() { const [theme, setTheme] = React.useState('dark'); const [phoneNumber, setPhoneNumber] = React.useState(''); const [name, setName] = React.useState(''); const [otp, setOtp] = React.useState(''); const [otpSent, setOtpSent] = React.useState(false); const [isLoggedIn, setIsLoggedIn] = React.useState(false); const sendOTP = ()=>{ // Logic to send OTP via SMS setOtpSent(true); }; const verifyOTP = ()=>{ setIsLoggedIn(true); }; const toggleTheme = ()=>{ setTheme(theme === 'light' ? 'dark' : 'light'); }; const themeStyles = theme === 'light' ? 'bg-white text-gray-900' : 'bg-[#121212] text-white'; const headerStyles = 'font-roboto font-bold text-2xl'; const inputStyles = `mb-4 p-2 w-full rounded-lg border shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-300 ${themeStyles}`; const buttonStyles = `mt-4 py-2 rounded-lg font-semibold w-full transition-colors duration-300 ${themeStyles}`; const toggleButtonStyles = 'absolute bottom-4 right-4 rounded-full p-4 cursor-pointer'; const toggleButtonIcon = theme === 'light' ? '🌞' : '🌛'; if (isLoggedIn) { return /*#__PURE__*/ React.createElement("div", { className: `${themeStyles} font-roboto min-h-screen w-screen p-4`, __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "flex-1 text-4xl font-bold mb-6", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "Hi, ", name)), /*#__PURE__*/ React.createElement("div", { className: `${themeStyles} p-4 rounded-lg shadow-lg`, __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "destination", placeholder: "Where to?", className: `${inputStyles} bg-transparent`, __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "location", placeholder: "Current Location", className: `${inputStyles} bg-transparent`, __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "datetime-local", name: "pickupTime", className: `${inputStyles} bg-transparent`, __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{} /* Redirect to drivers list */ , className: `${buttonStyles} bg-blue-500 text-white`, __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "Book Cab")), /*#__PURE__*/ React.createElement("button", { className: `${toggleButtonStyles}`, onClick: toggleTheme, __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, toggleButtonIcon)); } return /*#__PURE__*/ React.createElement("div", { className: `font-roboto ${themeStyles} min-h-screen w-screen p-4 flex flex-col items-center justify-center`, __source: { fileName: "", lineNumber: 73, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: `${headerStyles} mb-8`, __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, otpSent ? 'Enter OTP' : 'Ride-X'), !otpSent && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("input", { type: "tel", name: "phoneNumber", placeholder: "Phone Number", value: phoneNumber, onChange: (e)=>setPhoneNumber(e.target.value), className: inputStyles, __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", placeholder: "Name", value: name, onChange: (e)=>setName(e.target.value), className: inputStyles, __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: sendOTP, className: buttonStyles, __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, "Send OTP")), otpSent && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("input", { type: "number", name: "otp", placeholder: "OTP", value: otp, onChange: (e)=>setOtp(e.target.value), className: inputStyles, __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: verifyOTP, className: buttonStyles, __source: { fileName: "", lineNumber: 115, columnNumber: 11 }, __self: this }, "Verify OTP")), /*#__PURE__*/ React.createElement("button", { className: toggleButtonStyles, onClick: toggleTheme, style: { fontSize: '1.5rem' }, __source: { fileName: "", lineNumber: 124, columnNumber: 7 }, __self: this }, toggleButtonIcon)); }