function MainComponent() { const [showCalendar, setShowCalendar] = React.useState(false); const [showTasks, setShowTasks] = React.useState(false); const [selectedTask, setSelectedTask] = React.useState(null); const toggleCalendar = ()=>{ setShowCalendar((prevState)=>!prevState); setShowTasks(false); }; const toggleTasks = ()=>{ setShowTasks((prevState)=>!prevState); setShowCalendar(false); }; const goToHome = ()=>{ setShowCalendar(false); setShowTasks(false); setSelectedTask(null); }; const Task = ({ title, datetime, onDetail })=>/*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 p-2 rounded-md mb-2", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-800 font-semibold", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("span", { className: "text-gray-500 text-xs", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, datetime)), /*#__PURE__*/ React.createElement("button", { className: "bg-green-600 text-white px-4 py-2 rounded-md mt-2 w-full", onClick: onDetail, __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, "詳細")); const TaskDetail = ({ task, onAccept, onReject })=>/*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-md shadow-md", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-gray-800 font-semibold mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, task.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, "日時: ", task.datetime), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, "荷物受け取り場所: ", task.pickupLocation), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-4", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, "配達場所: ", task.deliveryLocation), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, "受取人の名前: ", task.recipientName), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-4", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, "受け取り方法: ", task.deliveryMethod), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-600 text-white px-4 py-2 rounded-md", onClick: onAccept, __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, "受注"), /*#__PURE__*/ React.createElement("button", { className: "bg-red-600 text-white px-4 py-2 rounded-md", onClick: onReject, __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "拒否"))); const tasks = [ { title: "依頼 1", datetime: "2023/10/03 14:23", pickupLocation: "場所1", deliveryLocation: "場所A", recipientName: "田中太郎", deliveryMethod: "手渡し" }, { title: "依頼 2", datetime: "2023/10/02 10:12", pickupLocation: "場所2", deliveryLocation: "場所B", recipientName: "山田花子", deliveryMethod: "宅配ボックス" }, { title: "依頼 3", datetime: "2023/10/01 12:00", pickupLocation: "場所3", deliveryLocation: "場所C", recipientName: "佐藤次郎", deliveryMethod: "玄関先" } ]; const onTaskDetail = (task)=>setSelectedTask(task); const onAcceptTask = ()=>{ setSelectedTask(null); alert("受注されました"); }; const onRejectTask = ()=>{ setSelectedTask(null); alert("拒否されました"); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 font-sans relative", __source: { fileName: "", lineNumber: 66, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full bg-green-600 p-4 flex justify-end items-center", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-white text-2xl", onClick: goToHome, __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-circle", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, showTasks && selectedTask === null && /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-md shadow-md", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-gray-800 font-semibold mb-4", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "依頼受注リスト"), tasks.map((task, index)=>/*#__PURE__*/ React.createElement(Task, { key: index, ...task, onDetail: ()=>onTaskDetail(task), __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }))), selectedTask && /*#__PURE__*/ React.createElement(TaskDetail, { task: selectedTask, onAccept: onAcceptTask, onReject: onRejectTask, __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }), showCalendar && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-white p-4 rounded-md shadow-md z-10", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { src: "https://calendar.google.com/calendar/embed?src=ja.japanese%23holiday%40group.v.calendar.google.com&ctz=Asia%2FTokyo", style: { border: 0 }, width: "100%", height: "100%", frameBorder: "0", scrolling: "no", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-0 w-full bg-gray-200 p-4 flex justify-around items-center z-20", __source: { fileName: "", lineNumber: 97, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "flex flex-col items-center", onClick: toggleTasks, __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clipboard-list text-2xl text-green-600", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-green-600", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, "依頼受注リスト")), /*#__PURE__*/ React.createElement("button", { className: "flex flex-col items-center", onClick: toggleCalendar, __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-calendar-alt text-2xl text-green-600", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-green-600", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, "出勤可能日時")))); }