function LoginButton({ label, name }) { return /*#__PURE__*/ React.createElement("button", { className: "w-full py-2 px-4 font-roboto text-white bg-[#ffa500] rounded-md hover:bg-[#ffb732] focus:outline-none focus:bg-[#ffb732]", name: name, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, label); } function LoginButtonStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(LoginButton, { label: "ログイン", name: "login", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this })); } function MainComponent() { const [passwordVisible, setPasswordVisible] = React.useState(false); const togglePasswordVisibility = ()=>{ setPasswordVisible(!passwordVisible); }; const eyeIconClass = passwordVisible ? "fa fa-eye-slash" : "fa fa-eye"; const passwordInputType = passwordVisible ? "text" : "password"; return /*#__PURE__*/ React.createElement("div", { className: "flex min-h-screen justify-center items-center bg-white p-4", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-sm bg-white sm:p-8 space-y-6 md:border md:border-gray-300", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-center text-3xl font-roboto text-[#123e6e]", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, "ビルチェック"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-[#ffa500]", placeholder: "メールアドレス", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: passwordInputType, name: "password", className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-[#ffa500]", placeholder: "パスワード", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { onClick: togglePasswordVisibility, className: "absolute right-3 top-1/2 transform -translate-y-1/2 cursor-pointer text-gray-500", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: eyeIconClass, __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center text-sm", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#123e6e] hover:underline", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "パスワードを忘れましたか？")), /*#__PURE__*/ React.createElement(LoginButton, { label: "ログイン", name: "login", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-center text-sm text-gray-600", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "アカウントを持っていませんか？", /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#ffa500] hover:underline", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, " ", "登録する"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, ` @tailwind base; @tailwind components; @tailwind utilities; `)); }