function TaskStartGanttChart({ startTime }) { return /*#__PURE__*/ React.createElement("td", { className: "py-2 px-4 border-b", __source: { fileName: "", lineNumber: 2, columnNumber: 10 }, __self: this }, startTime); } function TaskStartGanttChartStory() { return /*#__PURE__*/ React.createElement("table", { className: "min-w-full", __source: { fileName: "", lineNumber: 7, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(TaskStartGanttChart, { startTime: "2023-10-05T08:00:00Z", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(TaskStartGanttChart, { startTime: "2023-10-05T12:00:00Z", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(TaskStartGanttChart, { startTime: "2023-10-05T16:00:00Z", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }))); } function MainComponent() { return /*#__PURE__*/ React.createElement("div", { className: "font-sans p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-100 p-4 rounded shadow", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, "ガントチャート"), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white px-3 py-1 rounded", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, "新しいタスク")), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full bg-white", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 12, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 13, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "py-2 px-4 border-b", __source: { fileName: "", lineNumber: 14, columnNumber: 17 }, __self: this }, "タスク"), /*#__PURE__*/ React.createElement("th", { className: "py-2 px-4 border-b", __source: { fileName: "", lineNumber: 15, columnNumber: 17 }, __self: this }, "開始日"), /*#__PURE__*/ React.createElement("th", { className: "py-2 px-4 border-b", __source: { fileName: "", lineNumber: 16, columnNumber: 17 }, __self: this }, "終了日"), /*#__PURE__*/ React.createElement("th", { className: "py-2 px-4 border-b", __source: { fileName: "", lineNumber: 17, columnNumber: 17 }, __self: this }, "進行状況"), /*#__PURE__*/ React.createElement("th", { className: "py-2 px-4 border-b", __source: { fileName: "", lineNumber: 18, columnNumber: 17 }, __self: this }, "開始時間"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, [ { name: "タスク 1", start: "2023-01-01", end: "2023-01-07", progress: 70, progressColor: "blue", startTime: "2023-10-05T08:00:00Z" }, { name: "タスク 2", start: "2023-01-08", end: "2023-01-15", progress: 100, progressColor: "green", startTime: "2023-10-05T12:00:00Z" } ].map((task, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, __source: { fileName: "", lineNumber: 40, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "py-2 px-4 border-b", __source: { fileName: "", lineNumber: 41, columnNumber: 19 }, __self: this }, task.name), /*#__PURE__*/ React.createElement("td", { className: "py-2 px-4 border-b", __source: { fileName: "", lineNumber: 42, columnNumber: 19 }, __self: this }, task.start), /*#__PURE__*/ React.createElement("td", { className: "py-2 px-4 border-b", __source: { fileName: "", lineNumber: 43, columnNumber: 19 }, __self: this }, task.end), /*#__PURE__*/ React.createElement("td", { className: "py-2 px-4 border-b", __source: { fileName: "", lineNumber: 44, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative pt-1", __source: { fileName: "", lineNumber: 45, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex mb-2 items-center justify-between", __source: { fileName: "", lineNumber: 46, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 47, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `text-xs font-semibold inline-block py-1 px-2 uppercase rounded text-${task.progressColor}-600 bg-${task.progressColor}-200`, __source: { fileName: "", lineNumber: 48, columnNumber: 27 }, __self: this }, task.progress, "%"))), /*#__PURE__*/ React.createElement("div", { className: "overflow-hidden h-2 mb-4 text-xs flex rounded bg-${task.progressColor}-200", __source: { fileName: "", lineNumber: 55, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-${task.progressColor}-500`, style: { width: `${task.progress}%` }, __source: { fileName: "", lineNumber: 56, columnNumber: 25 }, __self: this })))), /*#__PURE__*/ React.createElement(TaskStartGanttChart, { startTime: task.startTime, __source: { fileName: "", lineNumber: 63, columnNumber: 19 }, __self: this })))))))); }

タスク	開始日	終了日	進行状況	開始時間
タスク 1	2023-01-01	2023-01-07	70%	2023-10-05T08:00:00Z
タスク 2	2023-01-08	2023-01-15	100%	2023-10-05T12:00:00Z