function MainComponent() { const [currentMonth, setCurrentMonth] = React.useState(new Date()); const [selectedDateTime, setSelectedDateTime] = React.useState(""); const getDaysInMonth = (month, year)=>new Date(year, month, 0).getDate(); const handleDateClick = (day)=>{ const year = currentMonth.getFullYear(); const month = (currentMonth.getMonth() + 1).toString().padStart(2, '0'); const date = day.toString().padStart(2, '0'); setSelectedDateTime(`${year}/${month}/${date} 10:00`); }; const handleTimeClick = (time)=>{ const [year, month, day] = selectedDateTime.split(' ')[0].split('/'); setSelectedDateTime(`${year}/${month}/${day} ${time}`); }; const handlePrevMonth = ()=>{ const prevMonth = new Date(currentMonth.setMonth(currentMonth.getMonth() - 1)); setCurrentMonth(new Date(prevMonth)); }; const handleNextMonth = ()=>{ const nextMonth = new Date(currentMonth.setMonth(currentMonth.getMonth() + 1)); setCurrentMonth(new Date(nextMonth)); }; const getFormattedMonth = (date)=>{ return `${date.getFullYear()}年${(date.getMonth() + 1).toString().padStart(2, '0')}月`; }; const getDayStatus = (day)=>{ const dayOfWeek = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), day).getDay(); if (dayOfWeek === 3 || dayOfWeek === 4) return "休"; if ([ 9, 10, 11, 12, 13, 14 ].includes(day)) return "-"; return "○"; }; const getDayName = (day)=>{ const dayNames = [ "月", "火", "水", "木", "金", "土", "日" ]; return dayNames[day]; }; const daysInMonth = getDaysInMonth(currentMonth.getMonth() + 1, currentMonth.getFullYear()); const days = [ ...Array(daysInMonth).keys() ].map((i)=>({ date: i + 1, status: getDayStatus(i + 1) })); const adjustStartingDay = (weekday)=>weekday === 0 ? 6 : weekday - 1; const firstDayOfTheMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), 1); const startOffset = adjustStartingDay(firstDayOfTheMonth.getDay()); const calendarDays = [ ...Array(startOffset).fill(null), ...days ]; const times = [ "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00" ]; const renderCalendarHeader = ()=>{ const headers = []; for(let i = 0; i < 7; i++){ headers.push(/*#__PURE__*/ React.createElement("div", { key: i, className: "flex justify-center items-center w-[40px] h-[40px] border", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, getDayName(i))); } return headers; }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 font-roboto", __source: { fileName: "", lineNumber: 68, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-2", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handlePrevMonth, className: "px-4 py-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, "前の月"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, getFormattedMonth(currentMonth)), /*#__PURE__*/ React.createElement("button", { onClick: handleNextMonth, className: "px-4 py-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, "次の月")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-7 gap-2", __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, renderCalendarHeader(), calendarDays.map((day, index)=>/*#__PURE__*/ React.createElement("div", { key: index, onClick: ()=>day && day.status === "○" ? handleDateClick(day.date) : null, className: `flex justify-center items-center w-[40px] h-[40px] border rounded ${day && day.status === "○" ? "cursor-pointer hover:bg-green-100" : ""}`, __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, day ? `${day.date} ${day.status}` : ""))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, "予約可能時間"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2 mt-2", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, times.map((time, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>handleTimeClick(time), className: "px-4 py-2 bg-green-500 text-white rounded", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, time)))), /*#__PURE__*/ React.createElement("form", { className: "mt-4", __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "datetime", className: "block text-gray-700", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, "来店日時"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "datetime", name: "datetime", value: selectedDateTime, readOnly: true, className: "w-full px-4 py-2 border rounded", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this })))); }