function MainComponent() { const [teamMembers, setTeamMembers] = React.useState([ { id: 1, name: "Alice", tasks: 3, avatar: "/images/alice.png", schedule: [ "2023-04-01", "2023-04-15" ], isOverloaded: false }, { id: 2, name: "Bob", tasks: 5, avatar: "/images/bob.png", schedule: [ "2023-04-03", "2023-04-20" ], isOverloaded: true }, { id: 3, name: "Charlie", tasks: 2, avatar: "/images/charlie.png", schedule: [ "2023-04-05", "2023-04-10" ], isOverloaded: false } ]); const handleAlert = (name)=>alert(`${name} has too many tasks!`); const maxTasks = Math.max(...teamMembers.map((member)=>member.tasks)); const scheduleDates = [ "2023-04-01", "2023-04-05", "2023-04-10", "2023-04-15", "2023-04-20" ]; const checkTaskOnDate = (member, date)=>{ const startDate = new Date(member.schedule[0]); const endDate = new Date(member.schedule[1]); const checkDate = new Date(date); return startDate <= checkDate && checkDate <= endDate; }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center space-y-4 p-4 bg-gradient-to-b from-[#e0eafc] to-[#cfdef3]", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-crimson-text text-[#121212]", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, "チームのワークロードの概要"), /*#__PURE__*/ React.createElement("div", { className: "flex w-full max-w-[900px]", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-end pr-4", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, teamMembers.map((member)=>/*#__PURE__*/ React.createElement("div", { key: member.id, className: "mb-4", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: member.avatar, alt: `${member.name}'s avatar`, className: "w-[30px] h-[30px] rounded-full", __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "block font-roboto text-[12px]", __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, member.name)))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 grid grid-cols-5 gap-4 items-center", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, scheduleDates.map((date)=>/*#__PURE__*/ React.createElement("div", { key: date, className: "flex flex-col items-center space-y-2", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-[12px]", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, date), teamMembers.map((member)=>/*#__PURE__*/ React.createElement("div", { key: member.id, className: `w-4 h-4 ${checkTaskOnDate(member, date) ? 'bg-blue-600' : 'bg-gray-200'}`, __source: { fileName: "", lineNumber: 38, columnNumber: 17 }, __self: this })))))), teamMembers.map((member)=>/*#__PURE__*/ React.createElement("div", { key: member.id, className: "flex items-center w-full max-w-[600px] bg-white p-4 rounded-lg shadow-lg space-x-4", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: member.avatar, alt: `${member.name}'s avatar`, className: "w-[50px] h-[50px] rounded-full", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, member.name), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-600 h-2.5 rounded-full", style: { width: `${member.tasks / maxTasks * 100}%` }, __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("span", { className: `text-[16px] font-roboto ${member.isOverloaded ? 'text-red-500' : 'text-green-500'}`, __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, member.tasks, " Tasks"), member.isOverloaded && /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleAlert(member.name), className: "px-4 py-2 rounded bg-red-600 text-white font-roboto hover:bg-red-700 transition duration-300", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "Alert"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, ` body { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); } `)); }