function MainComponent() { const [events, setEvents] = React.useState([ { id: 1, title: 'チームミーティング', date: '2024-06-26', time: '14:00', participants: [ 1, 2, 3 ], image: 'team_meeting.jpg' }, { id: 2, title: 'プロジェクト計画', date: '2024-06-27', time: '10:00', participants: [ 1, 4 ], image: 'project_planning.jpg' } ]); const [profiles] = React.useState([ { id: 1, icon: 'fas fa-user-circle', name: 'Alice' }, { id: 2, icon: 'fas fa-user-circle', name: 'Bob' }, { id: 3, icon: 'fas fa-user-circle', name: 'Charlie' }, { id: 4, icon: 'fas fa-user-circle', name: 'David' } ]); const [editingEvent, setEditingEvent] = React.useState(null); const [formData, setFormData] = React.useState({ id: '', title: '', date: '', time: '', participants: '', image: '' }); const handleEditClick = (event)=>{ setEditingEvent(event.id); setFormData({ id: event.id, title: event.title, date: event.date, time: event.time, participants: event.participants.join(', '), image: event.image }); }; const handleFormChange = (e)=>{ const { name, value } = e.target; setFormData((prevData)=>({ ...prevData, [name]: value })); }; const handleFormSubmit = (e)=>{ e.preventDefault(); const updatedEvents = events.map((event)=>event.id === formData.id ? { ...formData, participants: formData.participants.split(', ') } : event); setEvents(updatedEvents); setEditingEvent(null); }; const openProfile = (profileId)=>{ alert(`プロフィールページに飛ぶ: ${profileId}`); }; const EventCard = ({ event })=>/*#__PURE__*/ React.createElement("div", { className: "mb-4 border rounded shadow-sm", __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/event-page", target: "_self", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: event.image, alt: `${event.title} image`, className: "w-full h-[200px] object-cover rounded-t", __source: { fileName: "", lineNumber: 52, columnNumber: 44 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "font-bold p-2", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, event.title), /*#__PURE__*/ React.createElement("div", { className: "p-2", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-calendar-alt mr-2", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, event.date)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-clock mr-2", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, event.time)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, event.participants.map((participantId)=>{ const profile = profiles.find((p)=>p.id === participantId); return /*#__PURE__*/ React.createElement("div", { key: participantId, onClick: ()=>openProfile(participantId), className: "mr-2 cursor-pointer", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: profile.icon, __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this })); }))), /*#__PURE__*/ React.createElement("div", { className: "p-2 flex justify-end", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleEditClick(event), className: "mr-2 border rounded px-4 py-2", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, "編集"), /*#__PURE__*/ React.createElement("button", { className: "border rounded bg-red-600 text-white px-4 py-2", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, "削除"))); return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 82, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, "イベント管理"), /*#__PURE__*/ React.createElement("button", { className: "mb-4 border rounded px-4 py-2", onClick: ()=>handleEditClick({ id: null, title: '', date: '', time: '', participants: '', image: '' }), __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, "新規イベント作成"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }, events.map((event)=>/*#__PURE__*/ React.createElement(EventCard, { key: event.id, event: event, __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }))), editingEvent !== null && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 flex items-center justify-center bg-black bg-opacity-50", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded shadow-lg w-[400px]", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, formData.id ? 'イベント編集' : 'イベント作成'), /*#__PURE__*/ React.createElement("form", { onSubmit: handleFormSubmit, __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 97, columnNumber: 17 }, __self: this }, "タイトル"), /*#__PURE__*/ React.createElement("input", { name: "title", value: formData.title, onChange: handleFormChange, className: "w-full border p-2 rounded", required: true, __source: { fileName: "", lineNumber: 98, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 106, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 107, columnNumber: 17 }, __self: this }, "日付"), /*#__PURE__*/ React.createElement("input", { name: "date", type: "date", value: formData.date, onChange: handleFormChange, className: "w-full border p-2 rounded", required: true, __source: { fileName: "", lineNumber: 108, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 117, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 118, columnNumber: 17 }, __self: this }, "時間"), /*#__PURE__*/ React.createElement("input", { name: "time", type: "time", value: formData.time, onChange: handleFormChange, className: "w-full border p-2 rounded", required: true, __source: { fileName: "", lineNumber: 119, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 128, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 129, columnNumber: 17 }, __self: this }, "参加者"), /*#__PURE__*/ React.createElement("input", { name: "participants", value: formData.participants, onChange: handleFormChange, className: "w-full border p-2 rounded", required: true, __source: { fileName: "", lineNumber: 130, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 138, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 139, columnNumber: 17 }, __self: this }, "画像URL"), /*#__PURE__*/ React.createElement("input", { name: "image", value: formData.image, onChange: handleFormChange, className: "w-full border p-2 rounded", required: true, __source: { fileName: "", lineNumber: 140, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end", __source: { fileName: "", lineNumber: 148, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mr-2 border rounded px-4 py-2 bg-blue-600 text-white", __source: { fileName: "", lineNumber: 149, columnNumber: 17 }, __self: this }, "保存"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setEditingEvent(null), className: "border rounded px-4 py-2", __source: { fileName: "", lineNumber: 150, columnNumber: 17 }, __self: this }, "キャンセル")))))); }