function MainComponent({ showMessage, errorMessage, handleSubmit }) { const formClass = "flex flex-col gap-[20px] w-full max-w-[400px] mx-auto p-8 bg-white rounded shadow"; const labelClass = "font-inter text-[16px]"; const inputClass = "p-3 border border-gray-300 rounded"; const buttonClass = "font-inter bg-[#1E90FF] text-white py-3 px-6 rounded text-[18px]"; const messageClass = "font-inter text-[18px] italic bg-[#90EE90] p-4 rounded text-center"; const errorClass = "font-inter text-[16px] italic text-red-600 p-4 text-center"; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col justify-center items-center bg-[url('/path/to/background-image.jpg')] bg-cover", __source: { fileName: "", lineNumber: 10, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-12 text-center", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-inter font-bold text-[32px]", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, "アプリの紹介とウェイトリスト登録を促すキャッチフレーズ")), /*#__PURE__*/ React.createElement("form", { className: formClass, onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: labelClass, __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, "名前"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", id: "name", className: inputClass, __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: labelClass, __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, "メールアドレス"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", id: "email", className: inputClass, __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: buttonClass, __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, "登録")), showMessage && /*#__PURE__*/ React.createElement("div", { className: messageClass, __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, "ウェイトリストに登録されました。ありがとうございます！"), errorMessage && /*#__PURE__*/ React.createElement("div", { className: errorClass, __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "有効なメールアドレスを入力してください。")); } function StoryComponent() { const handleSubmit = (event)=>{ event.preventDefault(); // Form submission logic here }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { showMessage: false, errorMessage: false, handleSubmit: handleSubmit, __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { showMessage: true, errorMessage: false, handleSubmit: handleSubmit, __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { showMessage: false, errorMessage: true, handleSubmit: handleSubmit, __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this })); }