function MainComponent() { const [message, setMessage] = React.useState(""); const [isBold, setIsBold] = React.useState(false); const [fontSize, setFontSize] = React.useState("text-base"); const [tab, setTab] = React.useState("メッセージ"); const [currentDate, setCurrentDate] = React.useState(new Date()); const [messages, setMessages] = React.useState([]); const [showTimePopup, setShowTimePopup] = React.useState(false); const [selectedDay, setSelectedDay] = React.useState(null); const [pinnedMessages, setPinnedMessages] = React.useState([]); const [users, setUsers] = React.useState([ { id: 1, name: "ユーザー1", icon: "/path-to-user-icon1.jpg", startTime: "10:00", endTime: "12:00" }, { id: 2, name: "ユーザー2", icon: "/path-to-user-icon2.jpg", startTime: "11:00", endTime: "13:00" } ]); const [startTime, setStartTime] = React.useState(""); const [endTime, setEndTime] = React.useState(""); const currentUser = "[ユーザー名]"; const handleImageUpload = (e)=>{ const file = e.target.files[0]; if (file) { const newMessage = { type: "image", content: URL.createObjectURL(file), date: new Date(), user: currentUser }; setMessages((prevMessages)=>[ newMessage, ...prevMessages ]); } }; const handleEmojiClick = (emoji)=>{ setMessage((prevMessage)=>prevMessage + emoji); }; const toggleBold = ()=>{ setIsBold((prevIsBold)=>!prevIsBold); }; const handleFontSizeChange = (e)=>{ setFontSize(e.target.value); }; const handleSwipe = (direction)=>{ const newDate = new Date(currentDate); if (direction === "left") { newDate.setMonth(currentDate.getMonth() - 1); } else { newDate.setMonth(currentDate.getMonth() + 1); } setCurrentDate(newDate); }; const handleSubmitMessage = ()=>{ const newMessage = { type: "text", content: message, date: new Date(), user: currentUser, isBold, fontSize, id: Date.now() }; setMessages((prevMessages)=>[ newMessage, ...prevMessages ]); setMessage(""); }; const togglePinMessage = (id)=>{ setPinnedMessages((prevPinnedMessages)=>{ if (prevPinnedMessages.includes(id)) { return prevPinnedMessages.filter((msgId)=>msgId !== id); } else { return [ ...prevPinnedMessages, id ]; } }); }; const handleJumpToMessage = (id)=>{ setTab("メッセージ"); setTimeout(()=>{ document.getElementById(`message-${id}`)?.scrollIntoView({ behavior: 'smooth' }); }, 0); }; const daysInMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).getDate(); const days = Array.from({ length: daysInMonth }, (_, i)=>new Date(currentDate.getFullYear(), currentDate.getMonth(), i + 1)); const openTimePopup = (day)=>{ setSelectedDay(day); setShowTimePopup(true); }; const closeTimePopup = ()=>{ setShowTimePopup(false); setSelectedDay(null); }; const handleSaveTime = ()=>{ closeTimePopup(); }; const renderCalendar = ()=>{ return /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-7 gap-4", __source: { fileName: "", lineNumber: 104, columnNumber: 7 }, __self: this }, days.map((day)=>{ const weekday = day.toLocaleString("ja-JP", { weekday: "short" }); const participantsCount = users.length; return /*#__PURE__*/ React.createElement("div", { key: day, className: "border p-2 cursor-pointer", onClick: ()=>openTimePopup(day), __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 110, columnNumber: 15 }, __self: this }, weekday), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 111, columnNumber: 15 }, __self: this }, day.getDate()), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 112, columnNumber: 15 }, __self: this }, "参加者: ", participantsCount, "人")); })); }; const TabContent = ()=>{ if (tab === "開催場所・時間") { return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-100", __source: { fileName: "", lineNumber: 123, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-lg", __source: { fileName: "", lineNumber: 125, columnNumber: 13 }, __self: this }, "イベント住所"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this }, "東京都新宿区西新宿2丁目8-1"), /*#__PURE__*/ React.createElement("iframe", { src: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.890886620359!2d139.69210085073595!3d35.689634038135265!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xbb033f5680196a13!2z44CSMTAwLTAwMDEg5p2x5Lqs6YO95aSn6YGT5Z-O77yT5LiB55uu77yR4oiS77yW!5e0!3m2!1sja!2sjp!4v1503009365585", width: "70%", height: "400", className: "mx-auto", allowFullScreen: "", loading: "lazy", __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 136, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-lg mb-2", __source: { fileName: "", lineNumber: 137, columnNumber: 13 }, __self: this }, "日付"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 138, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-xl font-semibold", onClick: ()=>handleSwipe("left"), __source: { fileName: "", lineNumber: 139, columnNumber: 15 }, __self: this }, "<"), /*#__PURE__*/ React.createElement("span", { className: "px-4 py-2 bg-white rounded shadow", __source: { fileName: "", lineNumber: 145, columnNumber: 15 }, __self: this }, currentDate.toLocaleDateString()), /*#__PURE__*/ React.createElement("button", { className: "text-xl font-semibold", onClick: ()=>handleSwipe("right"), __source: { fileName: "", lineNumber: 148, columnNumber: 15 }, __self: this }, ">")), renderCalendar())); } else if (tab === "コンテンツ") { return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-100 h-[300px] overflow-auto", __source: { fileName: "", lineNumber: 161, columnNumber: 9 }, __self: this }, pinnedMessages.length > 0 ? pinnedMessages.map((id)=>{ const pinnedMessage = messages.find((msg)=>msg.id === id); return pinnedMessage && /*#__PURE__*/ React.createElement("div", { key: id, onClick: ()=>handleJumpToMessage(id), className: "cursor-pointer mb-4", __source: { fileName: "", lineNumber: 167, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-yellow-300 p-2 rounded-lg", __source: { fileName: "", lineNumber: 168, columnNumber: 21 }, __self: this }, pinnedMessage.type === "text" ? pinnedMessage.content : /*#__PURE__*/ React.createElement("img", { src: pinnedMessage.content, alt: "uploaded content", className: "max-w-full", __source: { fileName: "", lineNumber: 169, columnNumber: 80 }, __self: this }))); }) : /*#__PURE__*/ React.createElement("p", { className: "text-gray-500", __source: { fileName: "", lineNumber: 176, columnNumber: 13 }, __self: this }, "ピン留めされたメッセージはありません。")); } else { return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-100 h-[300px] overflow-auto flex flex-col-reverse", __source: { fileName: "", lineNumber: 182, columnNumber: 9 }, __self: this }, messages.map((msg, index)=>{ const msgContent = msg.type === "text" ? /*#__PURE__*/ React.createElement("div", { className: `${msg.fontSize} ${msg.isBold ? "font-bold" : ""}`, __source: { fileName: "", lineNumber: 186, columnNumber: 17 }, __self: this }, msg.content) : /*#__PURE__*/ React.createElement("img", { src: msg.content, alt: "uploaded content", className: "max-w-full", __source: { fileName: "", lineNumber: 190, columnNumber: 17 }, __self: this }); return /*#__PURE__*/ React.createElement("div", { key: msg.id, id: `message-${msg.id}`, className: "flex justify-between mb-4", __source: { fileName: "", lineNumber: 198, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-500 text-white p-3 rounded-lg shadow-md max-w-xs", __source: { fileName: "", lineNumber: 199, columnNumber: 17 }, __self: this }, msg.user !== currentUser && /*#__PURE__*/ React.createElement("img", { src: "/path-to-user-avatar.jpg", alt: "送信者のアイコン", className: "w-6 h-6 rounded-full inline-block mr-2", __source: { fileName: "", lineNumber: 201, columnNumber: 21 }, __self: this }), msgContent, /*#__PURE__*/ React.createElement("button", { onClick: ()=>togglePinMessage(msg.id), className: "mt-2 text-xs text-yellow-500", __source: { fileName: "", lineNumber: 208, columnNumber: 19 }, __self: this }, pinnedMessages.includes(msg.id) ? 'Unpin' : 'Pin')), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-gray-500 ml-2", __source: { fileName: "", lineNumber: 212, columnNumber: 17 }, __self: this }, msg.date.toLocaleString())); })); } }; return /*#__PURE__*/ React.createElement("div", { className: "font-sans bg-gradient-to-r from-gray-200 to-gray-400", __source: { fileName: "", lineNumber: 224, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[70%] mx-auto bg-white", __source: { fileName: "", lineNumber: 225, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 226, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/path-to-your-image.jpg", alt: "Tent and vehicle at campsite", className: "w-full h-[200px] object-cover", __source: { fileName: "", lineNumber: 227, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 right-0 p-4 text-white text-5xl font-bold", __source: { fileName: "", lineNumber: 232, columnNumber: 11 }, __self: this }, "イベント名AAAAAAAAAAAAA...."), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-2 right-2 flex items-center space-x-2", __source: { fileName: "", lineNumber: 235, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/path-to-user-image.jpg", alt: "User profile", className: "w-10 h-10 rounded-full border-2 border-white", __source: { fileName: "", lineNumber: 236, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "bg-white px-2 py-1 rounded font-semibold", __source: { fileName: "", lineNumber: 241, columnNumber: 13 }, __self: this }, "[ユーザー名]"))), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 247, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-lg", __source: { fileName: "", lineNumber: 248, columnNumber: 11 }, __self: this }, "参加者"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2 mt-2", __source: { fileName: "", lineNumber: 249, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/path-to-participant1.jpg", alt: "Profile image of Participant 1", className: "w-12 h-12 rounded-full", __source: { fileName: "", lineNumber: 250, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "/path-to-participant2.jpg", alt: "Profile image of Participant 2", className: "w-12 h-12 rounded-full", __source: { fileName: "", lineNumber: 251, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "/path-to-participant3.jpg", alt: "Profile image of Participant 3", className: "w-12 h-12 rounded-full", __source: { fileName: "", lineNumber: 252, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "/path-to-participant4.jpg", alt: "Profile image of Participant 4", className: "w-12 h-12 rounded-full", __source: { fileName: "", lineNumber: 253, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "/path-to-participant5.jpg", alt: "Profile image of Participant 5", className: "w-12 h-12 rounded-full", __source: { fileName: "", lineNumber: 254, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-gray-500", __source: { fileName: "", lineNumber: 255, columnNumber: 13 }, __self: this }, "more..."))), /*#__PURE__*/ React.createElement("div", { className: "p-4 border-t border-gray-200", __source: { fileName: "", lineNumber: 259, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-lg", __source: { fileName: "", lineNumber: 260, columnNumber: 11 }, __self: this }, "イベントの詳細をチェックすることができる"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mt-2", __source: { fileName: "", lineNumber: 261, columnNumber: 11 }, __self: this }, "本文のイベントの概要をダラダラと下に書いていくことができる 1234567890123456789012345678901234567890123456789012345678901234567890123")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-around p-4 border-t border-gray-200", __source: { fileName: "", lineNumber: 267, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setTab("メッセージ"), className: `font-bold ${tab === "メッセージ" ? 'text-blue-500' : 'text-gray-400'}`, __source: { fileName: "", lineNumber: 268, columnNumber: 11 }, __self: this }, "メッセージ"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setTab("開催場所・時間"), className: `font-bold ${tab === "開催場所・時間" ? 'text-blue-500' : 'text-gray-400'}`, __source: { fileName: "", lineNumber: 269, columnNumber: 11 }, __self: this }, "開催場所・時間"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setTab("コンテンツ"), className: `font-bold ${tab === "コンテンツ" ? 'text-blue-500' : 'text-gray-400'}`, __source: { fileName: "", lineNumber: 270, columnNumber: 11 }, __self: this }, "コンテンツ")), /*#__PURE__*/ React.createElement(TabContent, { __source: { fileName: "", lineNumber: 273, columnNumber: 9 }, __self: this }), tab === "メッセージ" && /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-white border-t border-gray-200", __source: { fileName: "", lineNumber: 276, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2 mb-2", __source: { fileName: "", lineNumber: 277, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleBold, className: `px-2 py-1 border rounded ${isBold ? 'font-bold' : ''}`, __source: { fileName: "", lineNumber: 278, columnNumber: 15 }, __self: this }, "B"), /*#__PURE__*/ React.createElement("select", { name: "fontSize", onChange: handleFontSizeChange, value: fontSize, className: "px-2 py-1 border rounded", __source: { fileName: "", lineNumber: 279, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "text-sm", __source: { fileName: "", lineNumber: 280, columnNumber: 17 }, __self: this }, "小"), /*#__PURE__*/ React.createElement("option", { value: "text-base", __source: { fileName: "", lineNumber: 281, columnNumber: 17 }, __self: this }, "中"), /*#__PURE__*/ React.createElement("option", { value: "text-lg", __source: { fileName: "", lineNumber: 282, columnNumber: 17 }, __self: this }, "大")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleEmojiClick("😊"), className: "px-2 py-1 border rounded", __source: { fileName: "", lineNumber: 284, columnNumber: 15 }, __self: this }, "😊"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleEmojiClick("👍"), className: "px-2 py-1 border rounded", __source: { fileName: "", lineNumber: 285, columnNumber: 15 }, __self: this }, "👍"), /*#__PURE__*/ React.createElement("label", { className: "px-2 py-1 border rounded cursor-pointer bg-gray-200", __source: { fileName: "", lineNumber: 286, columnNumber: 15 }, __self: this }, "画像", /*#__PURE__*/ React.createElement("input", { type: "file", name: "image", onChange: handleImageUpload, className: "hidden", __source: { fileName: "", lineNumber: 288, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 291, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "message", type: "text", value: message, onChange: (e)=>setMessage(e.target.value), className: `w-full p-2 border rounded ${fontSize} ${isBold ? 'font-bold' : ''}`, placeholder: "メッセージを入力", __source: { fileName: "", lineNumber: 292, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSubmitMessage, className: "ml-2 px-8 py-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 300, columnNumber: 15 }, __self: this }, "送信"))), showTimePopup && selectedDay && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 flex items-center justify-center bg-black bg-opacity-50", __source: { fileName: "", lineNumber: 306, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded shadow-lg w-[300px]", __source: { fileName: "", lineNumber: 307, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-lg mb-2", __source: { fileName: "", lineNumber: 308, columnNumber: 15 }, __self: this }, `${selectedDay.getFullYear()}年${selectedDay.getMonth() + 1}月${selectedDay.getDate()}日`), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 309, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold mb-1", __source: { fileName: "", lineNumber: 310, columnNumber: 17 }, __self: this }, "開始予定時間"), /*#__PURE__*/ React.createElement("input", { type: "time", name: "startTime", value: startTime, onChange: (e)=>setStartTime(e.target.value), className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 311, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 319, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold mb-1", __source: { fileName: "", lineNumber: 320, columnNumber: 17 }, __self: this }, "終了予定時間"), /*#__PURE__*/ React.createElement("input", { type: "time", name: "endTime", value: endTime, onChange: (e)=>setEndTime(e.target.value), className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 321, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 329, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 330, columnNumber: 17 }, __self: this }, "参加するユーザー"), users.map((user)=>/*#__PURE__*/ React.createElement("div", { key: user.id, className: "flex items-center space-x-2 mb-2", __source: { fileName: "", lineNumber: 332, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: user.icon, alt: `${user.name}のアイコン`, className: "w-6 h-6 rounded-full", __source: { fileName: "", lineNumber: 333, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 334, columnNumber: 21 }, __self: this }, user.name), /*#__PURE__*/ React.createElement("span", { className: "text-gray-500 text-sm", __source: { fileName: "", lineNumber: 335, columnNumber: 21 }, __self: this }, `${user.startTime} - ${user.endTime}`)))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end space-x-2", __source: { fileName: "", lineNumber: 339, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: closeTimePopup, className: "px-4 py-2 bg-gray-300 rounded", __source: { fileName: "", lineNumber: 340, columnNumber: 17 }, __self: this }, "キャンセル"), /*#__PURE__*/ React.createElement("button", { onClick: handleSaveTime, className: "px-4 py-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 341, columnNumber: 17 }, __self: this }, "保存")))))); }