function UserInteractionInterface({ type, username, email, password, recipient, amount, balance, role, notifications, handleSubmit, handleChange, handleClick }) { const userRegistration = /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xl bg-white p-8 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4 text-center font-roboto", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, "User Registration"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-gray-300 rounded", type: "text", name: "username", value: username, onChange: handleChange, placeholder: "Username", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-gray-300 rounded", type: "email", name: "email", value: email, onChange: handleChange, placeholder: "Email", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-gray-300 rounded", type: "password", name: "password", value: password, onChange: handleChange, placeholder: "Password", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-2 bg-blue-500 text-white font-bold rounded hover:bg-blue-600", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, "Register")), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-4 font-roboto", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, "Already have an account? ", /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-blue-500", onClick: handleClick, __source: { fileName: "", lineNumber: 51, columnNumber: 34 }, __self: this }, "Login"))); const userLogin = /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xl bg-white p-8 mt-8 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 57, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4 text-center font-roboto", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, "User Login"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-gray-300 rounded", type: "email", name: "email", value: email, onChange: handleChange, placeholder: "Email", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-gray-300 rounded", type: "password", name: "password", value: password, onChange: handleChange, placeholder: "Password", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-2 bg-green-500 text-white font-bold rounded hover:bg-green-600", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, "Login"))); const transaction = /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xl bg-white p-8 mt-8 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 87, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4 text-center font-roboto", __source: { fileName: "", lineNumber: 88, columnNumber: 7 }, __self: this }, "Transaction"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-gray-300 rounded", type: "text", name: "recipient", value: recipient, onChange: handleChange, placeholder: "Recipient Username", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-gray-300 rounded", type: "number", name: "amount", value: amount, onChange: handleChange, placeholder: "Amount", __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-2 bg-purple-500 text-white font-bold rounded hover:bg-purple-600", __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, "Send"))); const userBalance = /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xl bg-white p-8 mt-8 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 117, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4 text-center font-roboto", __source: { fileName: "", lineNumber: 118, columnNumber: 7 }, __self: this }, "User Balance"), /*#__PURE__*/ React.createElement("div", { className: "text-center text-xl p-4 bg-gray-200 rounded", __source: { fileName: "", lineNumber: 119, columnNumber: 7 }, __self: this }, "Current Balance: $", balance)); const roleBasedMatching = /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xl bg-white p-8 mt-8 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 124, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4 text-center font-roboto", __source: { fileName: "", lineNumber: 125, columnNumber: 7 }, __self: this }, "Role-Based Matching"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 126, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("select", { className: "w-full p-2 border border-gray-300 rounded", name: "role", value: role, onChange: handleChange, __source: { fileName: "", lineNumber: 127, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "buyer", __source: { fileName: "", lineNumber: 133, columnNumber: 11 }, __self: this }, "Buyer"), /*#__PURE__*/ React.createElement("option", { value: "seller", __source: { fileName: "", lineNumber: 134, columnNumber: 11 }, __self: this }, "Seller")), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-2 bg-yellow-500 text-white font-bold rounded hover:bg-yellow-600", __source: { fileName: "", lineNumber: 136, columnNumber: 9 }, __self: this }, "Match"))); const notificationsComponent = /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xl bg-white p-8 mt-8 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 147, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4 text-center font-roboto", __source: { fileName: "", lineNumber: 148, columnNumber: 7 }, __self: this }, "Notifications"), /*#__PURE__*/ React.createElement("div", { className: "text-center text-lg p-4 bg-gray-200 rounded", __source: { fileName: "", lineNumber: 149, columnNumber: 7 }, __self: this }, notifications)); const components = { registration: userRegistration, login: userLogin, transaction: transaction, balance: userBalance, matching: roleBasedMatching, notifications: notificationsComponent }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 163, columnNumber: 5 }, __self: this }, components[type]); } function UserInteractionInterfaceStory() { const handleSubmit = (e)=>e.preventDefault(); const handleChange = ()=>{}; const handleClick = ()=>{}; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 175, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(UserInteractionInterface, { type: "registration", handleSubmit: handleSubmit, handleChange: handleChange, handleClick: handleClick, __source: { fileName: "", lineNumber: 176, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(UserInteractionInterface, { type: "login", handleSubmit: handleSubmit, handleChange: handleChange, __source: { fileName: "", lineNumber: 177, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(UserInteractionInterface, { type: "transaction", handleSubmit: handleSubmit, handleChange: handleChange, __source: { fileName: "", lineNumber: 178, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(UserInteractionInterface, { type: "balance", balance: "0.00", __source: { fileName: "", lineNumber: 179, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(UserInteractionInterface, { type: "matching", handleSubmit: handleSubmit, handleChange: handleChange, __source: { fileName: "", lineNumber: 180, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(UserInteractionInterface, { type: "notifications", notifications: "No new notifications", __source: { fileName: "", lineNumber: 181, columnNumber: 7 }, __self: this })); } function MainComponent() { const handleSubmit = (e)=>e.preventDefault(); const handleChange = ()=>{}; const handleClick = ()=>{}; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 7, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(UserInteractionInterface, { type: "registration", handleSubmit: handleSubmit, handleChange: handleChange, handleClick: handleClick, __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(UserInteractionInterface, { type: "login", handleSubmit: handleSubmit, handleChange: handleChange, __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(UserInteractionInterface, { type: "transaction", handleSubmit: handleSubmit, handleChange: handleChange, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(UserInteractionInterface, { type: "balance", balance: "0.00", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(UserInteractionInterface, { type: "matching", handleSubmit: handleSubmit, handleChange: handleChange, __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(UserInteractionInterface, { type: "notifications", notifications: "No new notifications", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this })); }