function MainComponent() { const daysInMonth = 30; const defaultHabits = [ "YouTube試聴時間15分以内", "Instagram使用15分以内", "Twitter使用15分以内", "英語学習", "筋トレ", "音楽基礎トレーニング" ]; const [habitStatus, setHabitStatus] = React.useState(defaultHabits.reduce((acc, habit)=>{ acc[habit] = Array(daysInMonth).fill(false); return acc; }, {})); const toggleHabitStatus = (habit, day)=>{ setHabitStatus((prevStatus)=>{ const newStatus = { ...prevStatus }; newStatus[habit][day] = !newStatus[habit][day]; return newStatus; }); }; const days = []; for(let i = 1; i <= daysInMonth; i++){ days.push(i); } return /*#__PURE__*/ React.createElement("div", { className: "font-roboto flex flex-col items-center py-10", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-6", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, "習慣カレンダー"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-7 gap-4 mb-6 w-full max-w-[700px]", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, days.map((day)=>/*#__PURE__*/ React.createElement("div", { key: day, className: "p-4 border rounded-md text-center", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, day))), defaultHabits.map((habit)=>/*#__PURE__*/ React.createElement("div", { key: habit, className: "mb-4 w-full max-w-[700px]", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, habit), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-7 gap-4", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, days.map((day)=>{ const isCompleted = habitStatus[habit][day - 1]; const iconClass = isCompleted ? "fa fa-check-circle" : "fa fa-circle-o"; const iconColor = isCompleted ? "text-green-500" : "text-gray-500"; return /*#__PURE__*/ React.createElement("div", { key: `${habit}-${day}`, onClick: ()=>toggleHabitStatus(habit, day - 1), className: `border p-2 rounded-md flex justify-center items-center cursor-pointer ${iconColor}`, __source: { fileName: "", lineNumber: 51, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: iconClass, __source: { fileName: "", lineNumber: 56, columnNumber: 19 }, __self: this })); }))))); }