function MainComponent() { const [attendance, setAttendance] = React.useState([]); const [attendStatus, setAttendStatus] = React.useState(false); const toggleAttendance = ()=>{ setAttendStatus(!attendStatus); const newAttendance = [ ...attendance, { id: attendance.length + 1, date: new Date().toLocaleDateString(), status: !attendStatus } ]; setAttendance(newAttendance); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#f9f9f9] min-h-screen", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#202020] p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white text-2xl font-semibold font-roboto", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, "出席管理システム"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 items-center", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search", className: "p-2 w-[300px] rounded-lg", name: "search", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "text-white text-lg", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-search", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 items-center", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-bell text-white text-xl", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "/profile.jpg", alt: "User Profile Picture", className: "w-[40px] h-[40px] rounded-full", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("main", { className: "flex flex-col items-center p-4 space-y-4", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-lg w-[300px] text-center", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/profile.jpg", alt: "User Profile Large Picture", className: "w-[100px] h-[100px] rounded-full mx-auto mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: toggleAttendance, className: `${attendStatus ? 'bg-red-500' : 'bg-green-500'} text-white px-4 py-2 rounded-full font-roboto`, __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, attendStatus ? '出席取消' : '出席')), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-lg w-full", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-roboto text-center mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "これまでの出席状況"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, attendance.map((record)=>/*#__PURE__*/ React.createElement("li", { key: record.id, className: "font-roboto text-center", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, record.date, " - ", record.status ? '出席' : '欠席')))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-lg w-full", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-roboto text-center mb-4", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "次のスケジュール"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2 text-center font-roboto", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, "2023/10/10 - 講義A"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, "2023/10/11 - 講義B"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, "2023/10/12 - 講義C"))))); }