function MainComponent() { const [page, setPage] = React.useState(1); const questions = [ { question: "Extroversion or Introversion?", jp: "性格が内向性か外向性か" }, { question: "Outdoor or Indoor?", jp: "アウトドアかインドアか" }, { question: "Do you like holidays?", jp: "休日は好きか嫌いか" }, { question: "Prefer being with a large group or alone?", jp: "大人数と過ごすか一人行動どちらがより好きか" }, { question: "Listener or talker?", jp: "会話では聞き手か話し手か" } ]; const handleNext = ()=>setPage(2); return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center min-h-screen bg-[#E6F4EA]", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded shadow-md w-[400px]", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, page === 1 && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold text-center mb-4 font-roboto", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }, "Personal Information 個人情報"), /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-crimson-text", __source: { fileName: "", lineNumber: 20, columnNumber: 15 }, __self: this }, "Name 名前"), /*#__PURE__*/ React.createElement("input", { name: "name", type: "text", className: "w-full mb-4 p-2 border rounded", __source: { fileName: "", lineNumber: 21, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-crimson-text", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }, "Nationality 国籍"), /*#__PURE__*/ React.createElement("input", { name: "nationality", type: "text", className: "w-full mb-4 p-2 border rounded", __source: { fileName: "", lineNumber: 24, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-crimson-text", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, "Primary Language 第一言語"), /*#__PURE__*/ React.createElement("input", { name: "primaryLanguage", type: "text", className: "w-full mb-4 p-2 border rounded", __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-crimson-text", __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, "Hobbies 趣味"), /*#__PURE__*/ React.createElement("input", { name: "hobbies", type: "text", className: "w-full mb-4 p-2 border rounded", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleNext, className: "w-full bg-[#A8D5BA] p-2 rounded font-roboto", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, "Next 次へ"))), page === 2 && /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-center mb-4 font-roboto", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, "Personality Questions パーソナリティの質問"), /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, questions.map((q, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4", __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-crimson-text", __source: { fileName: "", lineNumber: 43, columnNumber: 19 }, __self: this }, q.question, " ", q.jp), /*#__PURE__*/ React.createElement("select", { name: "question" + index, className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 44, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "1", __source: { fileName: "", lineNumber: 45, columnNumber: 21 }, __self: this }, "1"), /*#__PURE__*/ React.createElement("option", { value: "2", __source: { fileName: "", lineNumber: 46, columnNumber: 21 }, __self: this }, "2"), /*#__PURE__*/ React.createElement("option", { value: "3", __source: { fileName: "", lineNumber: 47, columnNumber: 21 }, __self: this }, "3"), /*#__PURE__*/ React.createElement("option", { value: "4", __source: { fileName: "", lineNumber: 48, columnNumber: 21 }, __self: this }, "4"), /*#__PURE__*/ React.createElement("option", { value: "5", __source: { fileName: "", lineNumber: 49, columnNumber: 21 }, __self: this }, "5"))))), /*#__PURE__*/ React.createElement("button", { type: "button", className: "w-full bg-[#A8D5BA] p-2 rounded font-roboto", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "See Match 相手を見る"), /*#__PURE__*/ React.createElement("button", { type: "button", className: "w-full mt-4 bg-[#A8D5BA] p-2 rounded font-roboto", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "Find Topics 話題を探す"), /*#__PURE__*/ React.createElement("button", { type: "button", className: "w-full mt-4 bg-[#A8D5BA] p-2 rounded font-roboto", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "Find More Topics さらに探す")))); }