function MainComponent() { const [email, setEmail] = React.useState(''); const [password, setPassword] = React.useState(''); const [page, setPage] = React.useState('main'); const handleEmailChange = (event)=>{ setEmail(event.target.value); }; const handlePasswordChange = (event)=>{ setPassword(event.target.value); }; const handleSubmit = (event)=>{ event.preventDefault(); setPage('dashboard'); }; const handleSignInClick = ()=>{ setPage('login'); }; const handleSignUpClick = ()=>{ window.location.href = '/signup'; }; const tabs = page === 'dashboard' && /*#__PURE__*/ React.createElement("div", { className: "border-b border-gray-200", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex flex-wrap -mb-px text-sm font-medium text-center", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "mr-2", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "inline-block py-4 px-4 text-blue-600 rounded-t-lg border-b-2 border-blue-600 active", "aria-current": "page", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "Workouts")), /*#__PURE__*/ React.createElement("li", { className: "mr-2", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "inline-block py-4 px-4 text-gray-500 rounded-t-lg hover:text-gray-600 hover:border-gray-300", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "Nutrition")), /*#__PURE__*/ React.createElement("li", { className: "mr-2", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "inline-block py-4 px-4 text-gray-500 rounded-t-lg hover:text-gray-600 hover:border-gray-300", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "Sleep")))); const mainContent = page === 'main' && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl font-extrabold text-gray-900 font-roboto", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, "Work Me Out"), /*#__PURE__*/ React.createElement("p", { className: "mt-4 text-xl leading-6 text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, "Personalized workout diary"), /*#__PURE__*/ React.createElement("div", { className: "mt-12", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mx-auto max-w-md", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleSignInClick, className: "w-full px-3 py-2 my-2 text-lg font-medium text-gray-900 bg-blue-100 rounded-md focus:outline-none", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "Log In"), /*#__PURE__*/ React.createElement("button", { onClick: handleSignUpClick, className: "w-full px-3 py-2 my-2 text-lg font-medium text-gray-900 bg-green-100 rounded-md focus:outline-none", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "Sign Up")))); const loginContent = page === 'login' && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-x-0 bottom-0 p-6 bg-white rounded-t-lg shadow-lg max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 63, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mb-6 text-3xl font-semibold text-center text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, "Log In"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-6", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, "Email Address"), /*#__PURE__*/ React.createElement("input", { type: "email", id: "email", name: "email", value: email, onChange: handleEmailChange, className: "block w-full px-3 py-2 mt-1 border rounded-md bg-gray-50 border-gray-300 placeholder-gray-400 focus:ring-blue-500 focus:border-blue-500", required: true, __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "password", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("input", { type: "password", id: "password", name: "password", value: password, onChange: handlePasswordChange, className: "block w-full px-3 py-2 mt-1 border rounded-md bg-gray-50 border-gray-300 placeholder-gray-400 focus:ring-blue-500 focus:border-blue-500", required: true, __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full px-4 py-2 text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:bg-blue-800", __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, "Log In"), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/signup", className: "inline-block text-sm text-blue-500 align-baseline hover:text-blue-800", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, "Sign up for an account")))); const backgroundStyle = { backgroundImage: "url('/work-me-out-bg.jpg')", backgroundPosition: 'center', backgroundSize: 'cover', backgroundRepeat: 'no-repeat' }; return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center h-screen", style: backgroundStyle, __source: { fileName: "", lineNumber: 112, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "py-12 bg-white bg-opacity-0 h-screen w-full px-4", __source: { fileName: "", lineNumber: 113, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mx-auto max-w-7xl", __source: { fileName: "", lineNumber: 114, columnNumber: 9 }, __self: this }, mainContent, tabs)), loginContent); }