function MainComponent() { const initialData = [ { id: 1, date: "2023-04-01", customerName: "高橋一郎", companyName: "株式会社高橋", options: [ "追加シート", "特別ランチ" ], status: "Confirmed", time: "10:00 AM" }, { id: 2, date: "2023-04-02", customerName: "佐藤恵子", companyName: "佐藤デザイン事務所", options: [ "ウェルカムドリンク" ], status: "Pending", time: "12:00 PM" }, { id: 3, date: "2023-04-03", customerName: "鈴木次郎", companyName: "鈴木建築", options: [], status: "Confirmed", time: "03:00 PM" }, { id: 4, date: "2023-04-04", customerName: "田中花子", companyName: "田中フラワー", options: [ "追加シート" ], status: "Cancelled", time: "11:00 AM" }, { id: 5, date: "2023-04-05", customerName: "渡辺修", companyName: "渡辺鉄工", options: [ "ウェルカムドリンク", "特別ランチ" ], status: "Pending", time: "01:00 PM" } ]; const [data, setData] = React.useState(initialData); const deleteReservation = (id)=>setData(data.filter((item)=>item.id !== id)); return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, ` @keyframes slideInFromLeft { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } `), /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-6 py-8", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-xl mb-4 text-center", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "スケジュール管理カレンダー"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full pr-4", style: { animation: 'slideInFromLeft 0.5s ease-out' }, __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-lg mb-2", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "カレンダービュー"), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-4 grid grid-cols-7 gap-4", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, Array.from({ length: 31 }, (_, i)=>i + 1).map((day)=>/*#__PURE__*/ React.createElement("div", { key: day, className: "bg-gray-200 p-2 rounded text-center", __source: { fileName: "", lineNumber: 33, columnNumber: 17 }, __self: this }, day)))), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 lg:w-1/4 px-4 py-4", style: { animation: 'slideInFromLeft 0.5s ease-out' }, __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-lg mb-2", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, "1日ビュー"), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-4 flex flex-col", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, data.filter(({ date })=>date === "2023-04-01").map(({ id, customerName, status, time })=>/*#__PURE__*/ React.createElement("div", { key: id, className: "p-2 rounded hover:bg-gray-100", __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-semibold", __source: { fileName: "", lineNumber: 42, columnNumber: 19 }, __self: this }, customerName), /*#__PURE__*/ React.createElement("div", { className: "text-xs", __source: { fileName: "", lineNumber: 43, columnNumber: 19 }, __self: this }, time), /*#__PURE__*/ React.createElement("div", { className: `px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${status}`, __source: { fileName: "", lineNumber: 44, columnNumber: 19 }, __self: this }, status))))), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 lg:w-1/4 px-4 py-4", style: { animation: 'slideInFromLeft 0.5s ease-out' }, __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-lg mb-2", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, "24時間ビュー"), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-4 grid grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, Array.from({ length: 24 }, (_, i)=>`${i}:00`).map((time)=>/*#__PURE__*/ React.createElement("div", { key: time, className: "bg-gray-200 p-2 rounded text-center", __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, time)))), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 lg:w-1/2 px-4 py-4", style: { animation: 'slideInFromLeft 0.5s ease-out' }, __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-lg mb-2", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "予約タイムライン"), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-4 flex flex-col space-y-2", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, data.map(({ id, date, customerName, status, time })=>/*#__PURE__*/ React.createElement("div", { key: id, className: "p-2 rounded hover:bg-gray-100", __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-semibold", __source: { fileName: "", lineNumber: 64, columnNumber: 19 }, __self: this }, customerName), /*#__PURE__*/ React.createElement("div", { className: "text-xs", __source: { fileName: "", lineNumber: 65, columnNumber: 19 }, __self: this }, `${date} - ${time}`), /*#__PURE__*/ React.createElement("div", { className: `px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${status}`, __source: { fileName: "", lineNumber: 66, columnNumber: 19 }, __self: this }, status)))))))); }