function MainComponent() { const [selectedPark, setSelectedPark] = React.useState(""); const [reviews, setReviews] = React.useState([]); const parksInfo = { yoyogi: { name: "代々木公園", location: "東京渋谷区", description: "広い公園です。" }, ueno: { name: "上野公園", location: "東京台東区", description: "動物園もあります。" } }; const handleParkChange = (e)=>{ const park = e.target.value; setSelectedPark(parksInfo[park] ? parksInfo[park] : ""); setReviews(park === "yoyogi" ? [ "レビュー 1", "レビュー 2" ] : [ "レビュー 3" ]); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 font-roboto min-h-screen bg-gray-200", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 p-4 rounded-md", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, "公園のレビュー"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "都道府県"), /*#__PURE__*/ React.createElement("select", { name: "prefecture", className: "border p-2 rounded w-full", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, "選択してください"), /*#__PURE__*/ React.createElement("option", { value: "tokyo", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, "東京"), /*#__PURE__*/ React.createElement("option", { value: "osaka", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, "大阪"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "市区町村"), /*#__PURE__*/ React.createElement("select", { name: "city", className: "border p-2 rounded w-full", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, "選択してください"), /*#__PURE__*/ React.createElement("option", { value: "shibuya", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, "渋谷区"), /*#__PURE__*/ React.createElement("option", { value: "chuo", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, "中央区"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "公園"), /*#__PURE__*/ React.createElement("select", { name: "park", className: "border p-2 rounded w-full", onChange: handleParkChange, __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, "選択してください"), /*#__PURE__*/ React.createElement("option", { value: "yoyogi", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "代々木公園"), /*#__PURE__*/ React.createElement("option", { value: "ueno", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "上野公園"))), selectedPark && /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-md shadow-md mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-medium mb-2", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, selectedPark.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-700 mb-1", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, "場所: ", selectedPark.location), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-700", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, selectedPark.description))), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-medium mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, selectedPark ? `${selectedPark.name}のレビュー` : "レビューを追加する"), /*#__PURE__*/ React.createElement("form", { className: "bg-white p-4 rounded-md shadow-md", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "公園の評価 (1-5)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "rating", className: "border p-2 rounded w-full", min: "1", max: "5", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "一緒に訪れた人"), /*#__PURE__*/ React.createElement("select", { name: "companions", className: "border p-2 rounded w-full", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, "選択してください"), /*#__PURE__*/ React.createElement("option", { value: "friend", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, "友人"), /*#__PURE__*/ React.createElement("option", { value: "children", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, "子ども"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "レビュー内容"), /*#__PURE__*/ React.createElement("textarea", { name: "review", className: "border p-2 rounded w-full", rows: "4", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "画像"), /*#__PURE__*/ React.createElement("input", { type: "file", name: "image", className: "border p-2 rounded w-full", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "レビュー者の年齢"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "reviewerAge", className: "border p-2 rounded w-full", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, "レビュー者の性別"), /*#__PURE__*/ React.createElement("select", { name: "reviewerGender", className: "border p-2 rounded w-full", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, "選択してください"), /*#__PURE__*/ React.createElement("option", { value: "male", __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, "男性"), /*#__PURE__*/ React.createElement("option", { value: "female", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, "女性"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, "レビュー日時"), /*#__PURE__*/ React.createElement("input", { type: "datetime-local", name: "reviewDate", className: "border p-2 rounded w-full", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, "公園を訪れた日時"), /*#__PURE__*/ React.createElement("input", { type: "datetime-local", name: "visitDate", className: "border p-2 rounded w-full", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-right", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, "送信")))), selectedPark && /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-medium mb-4", __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, "レビュー一覧"), reviews.map((review, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white p-4 rounded-md shadow-md mb-4", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-700", __source: { fileName: "", lineNumber: 105, columnNumber: 15 }, __self: this }, review))))); }