function GameSelectorDropdown({ gameOptions, handleGameChange }) { return /*#__PURE__*/ React.createElement("select", { className: "w-full p-2 border border-gray-300 rounded", id: "game", name: "game", onChange: handleGameChange, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "選択してください"), gameOptions); } function GameSelectorDropdownStory() { const gameOptions = [ /*#__PURE__*/ React.createElement("option", { key: "apex", value: "APEX", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, "APEX"), /*#__PURE__*/ React.createElement("option", { key: "valorant", value: "VALORANT", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, "VALORANT") ]; const handleGameChange = (e)=>{ console.log(e.target.value); // logic to update rank options based on the selected game }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(GameSelectorDropdown, { gameOptions: gameOptions, handleGameChange: handleGameChange, __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this })); } function MainComponent() { const gameOptions = [ /*#__PURE__*/ React.createElement("option", { key: "apex", value: "APEX", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, "APEX"), /*#__PURE__*/ React.createElement("option", { key: "valorant", value: "VALORANT", __source: { fileName: "", lineNumber: 4, columnNumber: 5 }, __self: this }, "VALORANT") ]; const apexRankOptions = [ /*#__PURE__*/ React.createElement("option", { key: "predator", value: "プレデター", __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }, "プレデター"), /*#__PURE__*/ React.createElement("option", { key: "master", value: "マスター", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, "マスター") ]; const valorantRankOptions = [ /*#__PURE__*/ React.createElement("option", { key: "radiant", value: "レディアント", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, "レディアント"), /*#__PURE__*/ React.createElement("option", { key: "immortal", value: "イモータル", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, "イモータル") ]; const [rankOptions, setRankOptions] = React.useState([]); const handleGameChange = (e)=>{ const selectedGame = e.target.value; if (selectedGame === 'APEX') { setRankOptions(apexRankOptions); } else if (selectedGame === 'VALORANT') { setRankOptions(valorantRankOptions); } else { setRankOptions([]); } }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto p-4 bg-white shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto mb-4", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, "ホーム"), /*#__PURE__*/ React.createElement("form", { action: "/page2", method: "post", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium font-roboto mb-1", htmlFor: "photo", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "写真"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-camera text-2xl mr-3", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "file", id: "photo", name: "photo", className: "hidden", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium font-roboto mb-1", htmlFor: "username", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "ユーザー名"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-gray-300 rounded", type: "text", id: "username", name: "username", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium font-roboto mb-1", htmlFor: "twitter", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Twitterリンク"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-gray-300 rounded", type: "url", id: "twitter", name: "twitter", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium font-roboto mb-1", htmlFor: "email", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "メールアドレス"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-gray-300 rounded", type: "email", id: "email", name: "email", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium font-roboto mb-1", htmlFor: "age", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "年齢"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-gray-300 rounded", type: "number", id: "age", name: "age", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium font-roboto mb-1", htmlFor: "game", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "主にプレイするゲーム"), /*#__PURE__*/ React.createElement(GameSelectorDropdown, { gameOptions: gameOptions, handleGameChange: handleGameChange, __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium font-roboto mb-1", htmlFor: "rank", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "最高ランク"), /*#__PURE__*/ React.createElement("select", { className: "w-full p-2 border border-gray-300 rounded", id: "rank", name: "rank", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, rankOptions)), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium font-roboto mb-1", htmlFor: "team-conditions", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "希望するチームの条件"), /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-2 border border-gray-300 rounded", id: "team-conditions", name: "team-conditions", maxLength: "150", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, "送信"))); }