function MainComponent({ onSubmit }) { const [email, setEmail] = React.useState(''); const [password, setPassword] = React.useState(''); const handleSubmit = (e)=>{ e.preventDefault(); if (!email || !password) { alert('Please fill out all required fields'); return; } onSubmit({ email, password }); }; return /*#__PURE__*/ React.createElement("div", { className: "w-[600px] mx-auto bg-white p-8 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-center mb-6 pb-2 border-b-2 border-orange-400", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, "ログイン"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex items-center", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: "w-32 font-bold", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, "メールアドレス"), /*#__PURE__*/ React.createElement("input", { type: "email", id: "email", name: "email", value: email, onChange: (e)=>setEmail(e.target.value), className: "flex-1 border rounded py-2 px-3", required: true, __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex items-center", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "password", className: "w-32 font-bold", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, "パスワード"), /*#__PURE__*/ React.createElement("input", { type: "password", id: "password", name: "password", value: password, onChange: (e)=>setPassword(e.target.value), className: "flex-1 border rounded py-2 px-3", required: true, __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-orange-500 hover:bg-orange-600 text-white font-bold py-2 px-8 rounded", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "ログイン"))), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-4", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/register", className: "text-orange-500 hover:text-orange-600", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "未登録の方はこちら"))); } function StoryComponent() { const handleSubmit = (data)=>{ console.log('Login data:', data); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this })); }