function MainComponent() { const [showPassword, setShowPassword] = React.useState(false); const togglePasswordVisibility = ()=>{ setShowPassword(!showPassword); }; const handleSubmit = (e)=>{ e.preventDefault(); }; return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center min-h-screen bg-[#0C0E1F]", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-8 rounded-[10px] bg-[#1B1E3D] w-full max-w-[400px] shadow-xl", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-6", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[80px] h-[80px] flex items-center justify-center", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[80px] h-[80px] bg-[#14C8DC] rounded-[10px] flex items-center justify-center", __source: { fileName: "", lineNumber: 18, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[40px] h-[40px] bg-[#1B1E3D]", __source: { fileName: "", lineNumber: 19, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute w-[20px] h-[20px] bg-[#14C8DC] right-[-10px] bottom-[-10px] rotate-45", __source: { fileName: "", lineNumber: 20, columnNumber: 17 }, __self: this }))))), /*#__PURE__*/ React.createElement("h2", { className: "text-[24px] font-sans text-[#FFFFFF] text-center mb-4", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, "しつもんクラフト"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", placeholder: "メールアドレス", className: "w-[90%] h-[50px] mx-auto block px-4 bg-[#0C0E1F] border-[1px] border-[#14C8DC] rounded-[10px] text-[#FFFFFF] placeholder-[#A9A9A9] text-[16px]", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4 relative", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: showPassword ? 'text' : 'password', name: "password", placeholder: "パスワード", className: "w-[90%] h-[50px] mx-auto block px-4 bg-[#0C0E1F] border-[1px] border-[#14C8DC] rounded-[10px] text-[#FFFFFF] placeholder-[#A9A9A9] text-[16px]", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 cursor-pointer text-[#A9A9A9] text-[24px]", onClick: togglePasswordVisibility, __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, showPassword ? '👁' : '👁️')), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-[90%] h-[50px] mx-auto block bg-[#14C8DC] text-white text-[18px] rounded-[10px] focus:outline-none", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "ログイン"), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-2", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#14C8DC] text-[14px] underline", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "パスワードをお忘れですか？"))))); }