function MainComponent() { const [menuItems, setMenuItems] = React.useState([ "カット", "シャンプー", "ヘアカラー" ]); const [reviews, setReviews] = React.useState([]); const [reviewInput, setReviewInput] = React.useState(""); const [ratings, setRatings] = React.useState([]); const handleReviewSubmit = ()=>{ setReviews([ ...reviews, reviewInput ]); setReviewInput(""); }; const handleRating = (e, index)=>{ const newRatings = [ ...ratings ]; newRatings[index] = e.target.value; setRatings(newRatings); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-lg font-roboto text-[#333]", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, "トリマー向け予約管理システム"), /*#__PURE__*/ React.createElement("div", { className: "my-6", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-md font-roboto text-[#555]", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, "カレンダー予約機能"), /*#__PURE__*/ React.createElement("div", { className: "border-2 border-[#ddd] p-2", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#666]", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, "＊カレンダー機能はここに表示＊"))), /*#__PURE__*/ React.createElement("div", { className: "my-6 w-full", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-md font-roboto text-[#555]", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, "口コミと評価"), /*#__PURE__*/ React.createElement("textarea", { className: "border border-[#ccc] p-2 w-full", placeholder: "口コミを書く", name: "review", value: reviewInput, onChange: (e)=>setReviewInput(e.target.value), __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mt-2 p-2 bg-[#4CAF50] text-white font-roboto", onClick: handleReviewSubmit, __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "送信する"), reviews.map((review, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mt-2", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#666]", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, review), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("select", { onChange: (e)=>handleRating(e, index), className: "border border-[#ccc] mr-2", name: "rating", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this }, "評価を選ぶ"), /*#__PURE__*/ React.createElement("option", { value: "1", __source: { fileName: "", lineNumber: 40, columnNumber: 17 }, __self: this }, "⭐️"), /*#__PURE__*/ React.createElement("option", { value: "2", __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }, "⭐️⭐️"), /*#__PURE__*/ React.createElement("option", { value: "3", __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this }, "⭐️⭐️⭐️"), /*#__PURE__*/ React.createElement("option", { value: "4", __source: { fileName: "", lineNumber: 43, columnNumber: 17 }, __self: this }, "⭐️⭐️⭐️⭐️"), /*#__PURE__*/ React.createElement("option", { value: "5", __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this }, "⭐️⭐️⭐️⭐️⭐️")), ratings[index] && /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#666]", __source: { fileName: "", lineNumber: 46, columnNumber: 34 }, __self: this }, "評価: ", ratings[index]))))), /*#__PURE__*/ React.createElement("div", { className: "my-6", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-md font-roboto text-[#555]", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "写真アップロード"), /*#__PURE__*/ React.createElement("input", { type: "file", name: "trimmerPhoto", className: "border border-[#ccc] p-2", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mt-2 p-2 bg-[#2196F3] text-white font-roboto", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "アップロードする")), /*#__PURE__*/ React.createElement("div", { className: "my-6", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-md font-roboto text-[#555]", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, "メニュー掲載"), /*#__PURE__*/ React.createElement("div", { className: "border-2 border-[#ddd] p-2 font-roboto", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "list-disc ml-4", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, menuItems.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, item)))))); }