function MainComponent({ variant = "login", onSubmit }) { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [status, setStatus] = useState(null); const [message, setMessage] = useState(""); const handleSubmit = async (e)=>{ e.preventDefault(); try { await onSubmit?.({ email, password }); setStatus("success"); setMessage(variant === "login" ? "Successfully logged in!" : "Successfully signed up!"); } catch (error) { setStatus("error"); setMessage(error.message || "An error occurred"); } }; return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md p-6 bg-white rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-center mb-6 font-roboto", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, variant === "login" ? "Login" : "Sign Up"), status && /*#__PURE__*/ React.createElement("div", { className: `mb-4 p-3 rounded ${status === "success" ? "bg-green-100 text-green-700" : "bg-red-100 text-red-700"}`, __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, message), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: email, onChange: (e)=>setEmail(e.target.value), placeholder: "Email", className: "w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", required: true, __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "password", name: "password", value: password, onChange: (e)=>setPassword(e.target.value), placeholder: "Password", className: "w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", required: true, __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full px-4 py-2 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, variant === "login" ? "Login" : "Sign Up"))); } function StoryComponent() { const mockSubmit = async (data)=>{ await new Promise((resolve)=>setTimeout(resolve, 1000)); if (Math.random() > 0.5) throw new Error("Random error occurred"); return data; }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-8 p-8 bg-gray-100", __source: { fileName: "", lineNumber: 77, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-4", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, "Login Form"), /*#__PURE__*/ React.createElement(MainComponent, { variant: "login", onSubmit: mockSubmit, __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-4", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, "Sign Up Form"), /*#__PURE__*/ React.createElement(MainComponent, { variant: "signup", onSubmit: mockSubmit, __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }))); }