function MainComponent() { const [selectedSlots, setSelectedSlots] = React.useState([]); const weekdays = [ "月", "火", "水", "木", "金" ]; const periods = [ "1限", "2限", "3限", "4限", "5限" ]; const toggleSlot = (day, period)=>{ const slotKey = `${day}_${period}`; if (selectedSlots.length < 3 && !selectedSlots.includes(slotKey)) { setSelectedSlots([ ...selectedSlots, slotKey ]); } else if (selectedSlots.includes(slotKey)) { setSelectedSlots(selectedSlots.filter((slot)=>slot !== slotKey)); } }; const handleSubmit = ()=>{ if (selectedSlots.length === 3) { alert("予約リクエストを送信しました"); } else { alert("3つの希望時間を選択してください"); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto text-center mb-8", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, "予約時間選択"), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow overflow-x-auto", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "p-3 border font-roboto", __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this }), weekdays.map((day)=>/*#__PURE__*/ React.createElement("th", { key: day, className: "p-3 border font-roboto", __source: { fileName: "", lineNumber: 34, columnNumber: 19 }, __self: this }, day)))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, periods.map((period)=>/*#__PURE__*/ React.createElement("tr", { key: period, __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-3 border font-roboto", __source: { fileName: "", lineNumber: 43, columnNumber: 19 }, __self: this }, period), weekdays.map((day)=>/*#__PURE__*/ React.createElement("td", { key: `${day}_${period}`, className: "p-3 border text-center", __source: { fileName: "", lineNumber: 45, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>toggleSlot(day, period), className: `w-full h-full p-2 rounded ${selectedSlots.includes(`${day}_${period}`) ? "bg-blue-500 text-white" : "bg-gray-100"}`, __source: { fileName: "", lineNumber: 49, columnNumber: 23 }, __self: this }, "選択")))))))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow mt-6", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg mb-2", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "希望時間"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, selectedSlots.map((slot, index)=>{ const [day, period] = slot.split("_"); return /*#__PURE__*/ React.createElement("p", { key: slot, className: "font-roboto", __source: { fileName: "", lineNumber: 73, columnNumber: 17 }, __self: this }, "第", index + 1, "希望: ", day, "曜日 ", period); }), selectedSlots.length < 3 && /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-500", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }, "あと", 3 - selectedSlots.length, "つ選択できます"))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 text-center", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleSubmit, className: "bg-blue-500 text-white px-8 py-3 rounded-lg font-roboto hover:bg-blue-600 transition-colors", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, "送信")))); }

	月	火	水	木	金
1限
2限
3限
4限
5限