function MainComponent() { const [tasks, setTasks] = React.useState([]); const [currentTask, setCurrentTask] = React.useState({ taskName: '', taskDuration: '', taskDependencies: '' }); const handleInputChange = (e)=>{ const { name, value } = e.target; setCurrentTask({ ...currentTask, [name]: value }); }; const addTask = ()=>{ if (currentTask.taskName && currentTask.taskDuration) { setTasks([ ...tasks, { ...currentTask, taskDependencies: currentTask.taskDependencies.split(',') } ]); setCurrentTask({ taskName: '', taskDuration: '', taskDependencies: '' }); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 font-roboto", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "text-center p-4 bg-blue-500 text-white", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "アローダイアグラム生成アプリ")), /*#__PURE__*/ React.createElement("main", { className: "flex flex-wrap justify-center items-start pt-6", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 p-4", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: (e)=>{ e.preventDefault(); addTask(); }, className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "taskName", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, "タスク名"), /*#__PURE__*/ React.createElement("input", { onChange: handleInputChange, value: currentTask.taskName, className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "taskName", name: "taskName", type: "text", placeholder: "タスク名を入力", required: true, __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "taskDuration", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, "所要時間"), /*#__PURE__*/ React.createElement("input", { onChange: handleInputChange, value: currentTask.taskDuration, className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "taskDuration", name: "taskDuration", type: "number", placeholder: "所要時間を入力", required: true, min: "1", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "taskDependencies", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, "依存関係"), /*#__PURE__*/ React.createElement("input", { onChange: handleInputChange, value: currentTask.taskDependencies, className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline", id: "taskDependencies", name: "taskDependencies", type: "text", placeholder: "依存するタスク名を入力", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "submit", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "タスク追加")))), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 p-4", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 h-full", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "block text-gray-700 text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "アローダイアグラム"), /*#__PURE__*/ React.createElement("div", { className: "text-gray-500 text-center border border-dashed border-gray-300 rounded h-96 flex justify-center items-center overflow-auto", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }))))); }