function MainComponent({ role, onAddUser, onLogin, onRegister }) { const [isRegistering, setIsRegistering] = React.useState(false); const [userRole, setUserRole] = React.useState(''); const handleLoginSubmit = (e)=>{ e.preventDefault(); const formData = new FormData(e.target); const username = formData.get('username'); const password = formData.get('password'); onLogin(username, password); }; const handleRegisterSubmit = (e)=>{ e.preventDefault(); const formData = new FormData(e.target); const newUser = { username: formData.get('username'), password: formData.get('password'), role: userRole }; onRegister(newUser); setIsRegistering(false); }; const handleRoleChange = (e)=>{ setUserRole(e.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 flex flex-col", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-end p-4", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-indigo-500 text-white px-4 py-2 rounded hover:bg-indigo-700", onClick: ()=>setIsRegistering(!isRegistering), __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, isRegistering ? 'Back to Login' : 'Add New User')), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center flex-1", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, !isRegistering ? /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg shadow-lg w-[400px]", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-center text-2xl font-bold mb-6 font-roboto", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, "Login"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleLoginSubmit, __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto mb-2", htmlFor: "username", __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this }, "Username"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-gray-300 rounded", type: "text", name: "username", id: "username", __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto mb-2", htmlFor: "password", __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-gray-300 rounded", type: "password", name: "password", id: "password", __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-indigo-500 text-white font-roboto py-2 rounded hover:bg-indigo-700", type: "submit", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, "Login"))) : /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg shadow-lg w-[400px]", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-center text-2xl font-bold mb-6 font-roboto", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "Register"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleRegisterSubmit, __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto mb-2", htmlFor: "username", __source: { fileName: "", lineNumber: 79, columnNumber: 17 }, __self: this }, "Username"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-gray-300 rounded", type: "text", name: "username", id: "username", __source: { fileName: "", lineNumber: 82, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto mb-2", htmlFor: "password", __source: { fileName: "", lineNumber: 90, columnNumber: 17 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-gray-300 rounded", type: "password", name: "password", id: "password", __source: { fileName: "", lineNumber: 93, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto mb-2", htmlFor: "role", __source: { fileName: "", lineNumber: 101, columnNumber: 17 }, __self: this }, "Role"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 104, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "mr-4", __source: { fileName: "", lineNumber: 105, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "role", value: "Doctor", checked: userRole === 'Doctor', onChange: handleRoleChange, __source: { fileName: "", lineNumber: 106, columnNumber: 21 }, __self: this }), "Doctor"), /*#__PURE__*/ React.createElement("label", { __source: { fileName: "", lineNumber: 115, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "role", value: "Admin", checked: userRole === 'Admin', onChange: handleRoleChange, __source: { fileName: "", lineNumber: 116, columnNumber: 21 }, __self: this }), "Admin"))), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-indigo-500 text-white font-roboto py-2 rounded hover:bg-indigo-700", type: "submit", __source: { fileName: "", lineNumber: 127, columnNumber: 15 }, __self: this }, "Register")))), role && /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg shadow-lg w-[400px] mt-8 mx-auto", __source: { fileName: "", lineNumber: 138, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-center text-2xl font-bold mb-6 font-roboto", __source: { fileName: "", lineNumber: 139, columnNumber: 11 }, __self: this }, role, " Dashboard"), /*#__PURE__*/ React.createElement("p", { className: "text-center text-xl font-roboto", __source: { fileName: "", lineNumber: 140, columnNumber: 11 }, __self: this }, "Welcome to your dashboard"))); } function StoryComponent() { const handleLogin = (username, password)=>{ if (username === 'doctor' && password === 'password') { console.log('Redirecting to Doctor Dashboard'); } else if (username === 'admin' && password === 'password') { console.log('Redirecting to Admin Dashboard'); } else { alert('Invalid credentials'); } }; const handleRegister = (newUser)=>{ console.log('Registering new user:', newUser); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 min-h-screen", __source: { fileName: "", lineNumber: 163, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { onAddUser: ()=>console.log('Add user functionality'), onLogin: handleLogin, onRegister: handleRegister, __source: { fileName: "", lineNumber: 164, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { role: "Doctor", __source: { fileName: "", lineNumber: 165, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { role: "Admin", __source: { fileName: "", lineNumber: 166, columnNumber: 7 }, __self: this })); }