function GrandstanderLoginForm({ children, username, password, onUsernameChange, onPasswordChange, onForgotPassword, onSubmit, onFacebookLogin, onTwitterLogin, onGoogleLogin }) { return /*#__PURE__*/ React.createElement("div", { className: "backdrop-blur-xl p-10 bg-white/30 rounded-lg shadow-2xl font-grandstander", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#d4d8f0] text-[48px] font-languageapp absolute -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, children), /*#__PURE__*/ React.createElement("form", { className: "space-y-4 relative", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "username", className: "block mb-2 text-sm text-[#121212]", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, "Username"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "username", id: "username", value: username, onChange: onUsernameChange, className: "w-full p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "password", className: "block mb-2 text-sm text-[#121212]", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("input", { type: "password", name: "password", id: "password", value: password, onChange: onPasswordChange, className: "w-full p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", onClick: onForgotPassword, className: "block text-sm text-[#007aff] hover:text-[#0056b3] transition-colors duration-300", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, "Forgot Password?"), /*#__PURE__*/ React.createElement("button", { type: "submit", onClick: onSubmit, className: "w-full p-2 bg-[#007bff] text-white rounded-md", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, "Login"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center space-x-2 mt-4", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", onClick: onFacebookLogin, className: "text-[#0d8bf2] hover:text-[#0a68c1] transition-colors duration-300", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-facebook-f", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", onClick: onTwitterLogin, className: "text-[#1da1f2] hover:text-[#1a8cd8] transition-colors duration-300", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-twitter", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", onClick: onGoogleLogin, className: "text-[#ea4335] hover:text-[#d6372d] transition-colors duration-300", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-google", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }))))); } function GrandstanderLoginFormStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(GrandstanderLoginForm, { children: "LinguaApp", username: "", password: "", onUsernameChange: ()=>{}, onPasswordChange: ()=>{}, onForgotPassword: ()=>{}, onSubmit: ()=>{}, onFacebookLogin: ()=>{}, onTwitterLogin: ()=>{}, onGoogleLogin: ()=>{}, __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this })); } function MainComponent() { const [username, setUsername] = React.useState(''); const [password, setPassword] = React.useState(''); const handleUsernameChange = (event)=>setUsername(event.target.value); const handlePasswordChange = (event)=>setPassword(event.target.value); const handleForgotPassword = ()=>{}; const handleSubmit = (event)=>{ event.preventDefault(); }; const handleFacebookLogin = ()=>{}; const handleTwitterLogin = ()=>{}; const handleGoogleLogin = ()=>{}; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-[#232946] font-grandstander overflow-hidden", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "z-10", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(GrandstanderLoginForm, { username: username, password: password, onUsernameChange: handleUsernameChange, onPasswordChange: handlePasswordChange, onForgotPassword: handleForgotPassword, onSubmit: handleSubmit, onFacebookLogin: handleFacebookLogin, onTwitterLogin: handleTwitterLogin, onGoogleLogin: handleGoogleLogin, __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, "LinguaApp"), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, ` .wave-animation { animation: waveMove 10s linear infinite; } @keyframes waveMove { from { transform: translateX(0%); } to { transform: translateX(-100%); } } `), /*#__PURE__*/ React.createElement("div", { className: "wave-animation", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "absolute bottom-0 left-0 mb-[-10px] z-0", viewBox: "0 0 1440 320", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("path", { fill: "white", fillOpacity: "1", d: "M0,160L48,149.3C96,139,192,117,288,106.7C384,96,480,96,576,117.3C672,139,768,181,864,192C960,203,1056,181,1152,176C1248,171,1344,181,1392,186.7L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z", __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this }))))); }