function Logo() { return /*#__PURE__*/ React.createElement("svg", { width: "150", height: "40", viewBox: "0 0 200 60", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "animate-logo", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("rect", { width: "200", height: "60", fill: "#FFFFFF", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("path", { d: "M20 10 L40 30 L20 50", stroke: "#4A90E2", strokeWidth: "4", fill: "none", className: "animate-path", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("path", { d: "M40 10 L60 30 L40 50", stroke: "#4A90E2", strokeWidth: "4", fill: "none", className: "animate-path", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("circle", { cx: "50", cy: "30", r: "5", fill: "#F5A623", className: "animate-circle", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("text", { x: "70", y: "38", fontFamily: "Arial, sans-serif", fontSize: "24", fontWeight: "bold", fill: "#333333", className: "animate-text", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, "Managilium")); } function Header() { return /*#__PURE__*/ React.createElement("header", { className: "bg-white shadow-sm animate-fadeIn py-2", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(Logo, { __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-transparent text-gray-500 hover:text-gray-700 transition-all", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bell", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "bg-transparent text-gray-500 hover:text-gray-700 transition-all", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }))))); } function TaskItem({ task, onDeleteTask }) { return /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center py-1 animate-fadeIn", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-800", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, task.name), /*#__PURE__*/ React.createElement("button", { onClick: onDeleteTask, className: "bg-transparent text-red-500 hover:text-red-700 transition-all", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }))); } function ProjectCard({ project, onDeleteProject, onAddTask, onDeleteTask }) { const [newTaskName, setNewTaskName] = useState(''); const [isExpanded, setIsExpanded] = useState(true); const handleAddTask = ()=>{ if (newTaskName.trim()) { onAddTask(project.id, newTaskName); setNewTaskName(''); } }; const projectTasks = project.tasks.map((task)=>/*#__PURE__*/ React.createElement(TaskItem, { key: task.id, task: task, onDeleteTask: ()=>onDeleteTask(project.id, task.id), __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this })); return /*#__PURE__*/ React.createElement("div", { className: "mb-3 overflow-hidden animate-fadeInUp bg-white rounded-lg shadow", __source: { fileName: "", lineNumber: 60, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "py-2 px-4 cursor-pointer bg-gradient-to-r from-blue-500 to-purple-500 text-white transition-all duration-300", onClick: ()=>setIsExpanded(!isExpanded), __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm font-medium", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, project.name), /*#__PURE__*/ React.createElement("div", { className: `transform transition-transform duration-300 ${isExpanded ? 'rotate-180' : ''}`, __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-down", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: `transition-all duration-300 ease-in-out ${isExpanded ? 'max-h-[500px] opacity-100' : 'max-h-0 opacity-0'}`, __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "py-2 px-4", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, projectTasks, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2 mt-2", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { value: newTaskName, onChange: (e)=>setNewTaskName(e.target.value), placeholder: "New Task", onKeyPress: (e)=>e.key === 'Enter' && handleAddTask(), className: "text-sm h-8 px-2 border rounded", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleAddTask, className: "h-8 px-2 bg-green-500 hover:bg-green-600 text-white rounded transition-all", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>onDeleteProject(project.id), className: "mt-2 text-xs text-red-500 hover:text-red-700 transition-colors", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash mr-1", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }), " Delete Project")))); } function ProjectManagementApp({ projects, onAddProject, onDeleteProject, onAddTask, onDeleteTask }) { const [newProjectName, setNewProjectName] = useState(''); const handleAddProject = ()=>{ if (newProjectName.trim()) { onAddProject(newProjectName); setNewProjectName(''); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-gray-50 to-gray-100", __source: { fileName: "", lineNumber: 107, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Header, { __source: { fileName: "", lineNumber: 108, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("main", { className: "max-w-3xl mx-auto p-4", __source: { fileName: "", lineNumber: 109, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4 text-gray-800 animate-fadeInDown", __source: { fileName: "", lineNumber: 110, columnNumber: 9 }, __self: this }, "Project Management"), /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex space-x-2 animate-fadeInUp", __source: { fileName: "", lineNumber: 111, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { value: newProjectName, onChange: (e)=>setNewProjectName(e.target.value), placeholder: "New Project Name", onKeyPress: (e)=>e.key === 'Enter' && handleAddProject(), className: "flex-grow h-10 px-2 border rounded", __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleAddProject, className: "bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded transition-all", __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, "Add")), projects.map((project)=>/*#__PURE__*/ React.createElement(ProjectCard, { key: project.id, project: project, onDeleteProject: onDeleteProject, onAddTask: onAddTask, onDeleteTask: onDeleteTask, __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this })))); } function ProjectManagementAppStory() { const initialProjects = [ { id: '1', name: 'Project 1', tasks: [ { id: '1', name: 'Task 1' }, { id: '2', name: 'Task 2' } ] }, { id: '2', name: 'Project 2', tasks: [ { id: '3', name: 'Task 3' } ] } ]; const [projects, setProjects] = useState(initialProjects); const addProject = (name)=>{ setProjects([ ...projects, { id: Date.now().toString(), name, tasks: [] } ]); }; const deleteProject = (projectId)=>{ setProjects(projects.filter((p)=>p.id !== projectId)); }; const addTask = (projectId, taskName)=>{ setProjects(projects.map((p)=>p.id === projectId ? { ...p, tasks: [ ...p.tasks, { id: Date.now().toString(), name: taskName } ] } : p)); }; const deleteTask = (projectId, taskId)=>{ setProjects(projects.map((p)=>p.id === projectId ? { ...p, tasks: p.tasks.filter((t)=>t.id !== taskId) } : p)); }; return /*#__PURE__*/ React.createElement(ProjectManagementApp, { projects: projects, onAddProject: addProject, onDeleteProject: deleteProject, onAddTask: addTask, onDeleteTask: deleteTask, __source: { fileName: "", lineNumber: 168, columnNumber: 5 }, __self: this }); } /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 180, columnNumber: 1 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } } @keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: none; } } .animate-fadeIn { animation: fadeIn 0.3s ease-in-out; } .animate-fadeInUp { animation: fadeInUp 0.3s ease-in-out; } .animate-fadeInDown { animation: fadeInDown 0.3s ease-in-out; } .animate-logo { animation: fadeIn 0.5s ease-in-out; } .animate-path { animation: fadeIn 0.5s ease-in-out; } .animate-circle { animation: fadeIn 0.7s ease-in-out; } .animate-text { animation: fadeIn 0.9s ease-in-out; } `); function MainComponent() { const [projects, setProjects] = React.useState([]); const [newProjectName, setNewProjectName] = React.useState(''); const [notification, setNotification] = React.useState(null); const addProject = ()=>{ if (newProjectName.trim()) { const newProject = { id: Date.now().toString(), name: newProjectName, tasks: [] }; setProjects((prev)=>[ ...prev, newProject ]); setNewProjectName(''); setNotification(`プロジェクト "${newProjectName}" が追加されました`); setTimeout(()=>setNotification(null), 3000); } }; const deleteProject = (projectId)=>{ setProjects((prev)=>prev.filter((p)=>p.id !== projectId)); setNotification("プロジェクトが削除されました"); setTimeout(()=>setNotification(null), 3000); }; const addTask = (projectId, taskName)=>{ setProjects((prev)=>prev.map((p)=>p.id === projectId ? { ...p, tasks: [ ...p.tasks, { id: Date.now().toString(), name: taskName } ] } : p)); setNotification(`タスク "${taskName}" が追加されました`); setTimeout(()=>setNotification(null), 3000); }; const updateTask = (projectId, taskId, updatedTask)=>{ setProjects((prev)=>prev.map((p)=>p.id === projectId ? { ...p, tasks: p.tasks.map((t)=>t.id === taskId ? updatedTask : t) } : p)); setNotification("タスクが更新されました"); setTimeout(()=>setNotification(null), 3000); }; const deleteTask = (projectId, taskId)=>{ setProjects((prev)=>prev.map((p)=>p.id === projectId ? { ...p, tasks: p.tasks.filter((t)=>t.id !== taskId) } : p)); setNotification("タスクが削除されました"); setTimeout(()=>setNotification(null), 3000); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white shadow-md", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-2 flex justify-between items-center", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { width: "180", height: "50", viewBox: "0 0 200 60", fill: "none", xmlns: "http://www.w3.org/2000/svg", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("rect", { width: "200", height: "60", fill: "#FFFFFF", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("path", { d: "M20 10 L40 30 L20 50", stroke: "#4A90E2", strokeWidth: "4", fill: "none", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("path", { d: "M40 10 L60 30 L40 50", stroke: "#4A90E2", strokeWidth: "4", fill: "none", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("circle", { cx: "50", cy: "30", r: "5", fill: "#F5A623", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("text", { x: "70", y: "38", fontFamily: "Arial, sans-serif", fontSize: "24", fontWeight: "bold", fill: "#333333", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, "Managilium")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-transparent hover:bg-gray-200 flex items-center justify-center h-10 w-10 rounded-full", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bell text-2xl", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-transparent hover:bg-gray-200 flex items-center justify-center h-10 w-10 rounded-full", __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user text-2xl", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 mt-2 w-48 bg-white border rounded shadow-lg hidden", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, [ 'プロフィール', '設定', 'ログアウト' ].map((item)=>/*#__PURE__*/ React.createElement("button", { key: item, className: "w-full text-left px-4 py-2 hover:bg-gray-200", __source: { fileName: "", lineNumber: 64, columnNumber: 19 }, __self: this }, item))))))), /*#__PURE__*/ React.createElement("main", { className: "max-w-3xl mx-auto p-4", __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, notification && /*#__PURE__*/ React.createElement("div", { className: "bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4 mb-4", role: "alert", __source: { fileName: "", lineNumber: 73, columnNumber: 26 }, __self: this }, notification), /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex space-x-2", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "newProjectName", className: "flex-grow border rounded px-3 py-2", placeholder: "新しいプロジェクトを追加", value: newProjectName, onChange: (e)=>setNewProjectName(e.target.value), onKeyPress: (e)=>e.key === 'Enter' && addProject(), __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white px-3 py-2 rounded", onClick: addProject, __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, "追加")), projects.map((project)=>/*#__PURE__*/ React.createElement("div", { key: project.id, className: "border rounded mb-4 p-4 bg-white", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-2", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }, project.name), /*#__PURE__*/ React.createElement("button", { className: "text-red-500 hover:text-red-700", onClick: ()=>deleteProject(project.id), __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash-alt", __source: { fileName: "", lineNumber: 90, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, project.tasks.map((task)=>/*#__PURE__*/ React.createElement("div", { key: task.id, className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 95, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 96, columnNumber: 19 }, __self: this }, task.name), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 97, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-blue-500 hover:text-blue-700 mr-2", onClick: ()=>updateTask(project.id, task.id, { ...task, name: prompt('タスク名を編集', task.name) || task.name }), __source: { fileName: "", lineNumber: 98, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-edit", __source: { fileName: "", lineNumber: 99, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-red-500 hover:text-red-700", onClick: ()=>deleteTask(project.id, task.id), __source: { fileName: "", lineNumber: 101, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash-alt", __source: { fileName: "", lineNumber: 102, columnNumber: 23 }, __self: this })))))), /*#__PURE__*/ React.createElement("div", { className: "mt-2 flex space-x-2", __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: `newTask_${project.id}`, className: "flex-grow border rounded px-3 py-2", placeholder: "新しいタスクを追加", onKeyPress: (e)=>e.key === 'Enter' && addTask(project.id, e.target.value), __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this })))))); }