function MainComponent() { const [selectedEvent, setSelectedEvent] = React.useState(null); const [selectedDate, setSelectedDate] = React.useState("2024-05-15"); const events = [ { date: "2024-05-15", time: "10:58~12:10", area: "BarLifeWork", participants: "yamapii, topper" }, { date: "2024-05-15", time: "12:10~13:04", area: "3F studio", participants: "yamapii, topper" }, { date: "2024-05-15", time: "13:04~13:15", area: "BarLifeWork", participants: "yamapii, topper" }, { date: "2024-05-15", time: "13:15~15:10", area: "3F studio", participants: "yamapii, topper" }, { date: "2024-05-15", time: "15:10~18:10", area: "BarLifeWork", participants: "yamapii, yuuya, yohei" }, { date: "2024-05-15", time: "18:10~20:00", area: "3F studio", participants: "yamapii" }, { date: "2024-05-28", time: "11:00~12:00", area: "BarLifeWork", participants: "yui, taro" }, { date: "2024-05-28", time: "12:00~13:00", area: "3F studio", participants: "hana, john" }, { date: "2024-05-28", time: "15:00~16:00", area: "BarLifeWork", participants: "miki, ken" } ]; const handleClick = (event)=>{ setSelectedEvent(event); }; const handleDateChange = (e)=>{ setSelectedDate(e.target.value); setSelectedEvent(null); }; const filteredEvents = events.filter((event)=>event.date === selectedDate); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen p-4 font-roboto", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "date", className: "border p-2 w-[200px]", value: selectedDate, onChange: handleDateChange, name: "date", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-row mt-4", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col w-[220px]", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center mb-4", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border w-full text-center p-2", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, selectedDate, "(Wed)")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-2", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, filteredEvents.map((event, index)=>/*#__PURE__*/ React.createElement("button", { key: index, className: `bg-gray-200 text-left p-2 rounded w-full ${event.time === "15:10~18:10" ? 'border-l-4 border-[#00ff00]' : ''}`, onClick: ()=>handleClick(event), __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 53, columnNumber: 17 }, __self: this }, event.time), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, event.area), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, event.participants))))), selectedEvent && /*#__PURE__*/ React.createElement("div", { className: "flex flex-1 justify-center ml-4", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border-2 border-[#00ff00] bg-white p-4 rounded w-[300px]", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, "Area :"), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, selectedEvent.area), /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, "Huddle Meeting Participants :"), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, selectedEvent.participants), /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, "Days :"), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, selectedDate, " ", selectedEvent.time), /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, "Summary :"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, "~~~~~~~~~~~~~~~~~~~~~~~~ ==================== ~~~~~~~~~~~~~~~~~~~~~~~~"), /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }, "EmoMeter"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-1 mt-2", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-4 h-12 bg-red-500", __source: { fileName: "", lineNumber: 77, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-4 h-8 bg-yellow-500", __source: { fileName: "", lineNumber: 78, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-4 h-10 bg-red-500", __source: { fileName: "", lineNumber: 79, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-4 h-8 bg-yellow-500", __source: { fileName: "", lineNumber: 80, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-4 h-10 bg-red-500", __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this })))))); }